iPhoneのSafariでページを拡大縮小させない方法
iPhoneのiOSが10になってから、Webページを拡大縮小させない指定の「user-scalable=no」が使えなくなってしまいました。そこで代替方法を紹介したいと思います。 HOME About this site Mail Last update 2018-08-13 5:54 am iOS10から、iPhoneではページの拡大・縮小を禁止する「user-scalable=no」が無効化されてしまいました。が、ゲームページや使い勝手上、拡大縮小を禁止させたい場合も多々あると思います。 そこで今回はiPhoneのiOS10以降のSafariでも、「ピンチイン・ピンチアウト」「ダブルタップ」「文字の入力時」の3つのパターンの拡大・縮小を禁止する方法を紹介します。 ※注意 独学で学んだレベルの技術しかないので、おかしい所があればコメントください(本職はトラックドライバーです(笑)) S
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
AmazonLinux2のhttpdをALB経由で公開するWeb環境で発生していた、SafariのHTTPS接続エラーを改善してみた | DevelopersIO
AmazonLinux2のhttpdをALB経由で公開するWeb環境で発生していた、SafariのHTTPS接続エラーを改善してみた はじめに AWSチームのすずきです。 Webサーバとして、Amazon Linux2 の httpd (Apache/2.4.37)、 ELB に HTTP/2 をサポートする Application Load Balancer (ALB) を利用する環境で、 iOS と macOS の Safari からの HTTPS 接続がエラーとなる現象を、 httpdの設定で回避する機会がありました。 その内容について紹介させていただきます。 構成 事象 Safariから HTTPS (HTTP/2) 接続時に、プロトコルエラーが発生する事がありました。 以下のサイトで紹介されていた、 iOS と、High Sierra の macOS 環境の Safari で、C
SafariのUA文字列が固定されて固定されなくなったおはなし - fragmentary
Jxckが以前、SafariのUA文字列が固定されたというのを書いていた。 Safari による User-Agent 固定化と Web における Feature Detection | blog.jxck.io Safari Technology Preview 46で入った変更だ。 Release Notes for Safari Technology Preview 46 | WebKit Froze the user-agent string to reduce web compatibility risk and to prevent its use for fingerprinting TwitterでもAppleのRicky Mondelloがそれを伝えていて、ちょっと騒ぎになっていた。「それは困る」的な反応が結構多かったのと、中には「やっぱりSafariは新たなIE6だ」み
レスポンシブデザインで気をつけたい、電話番号の扱い - Qiita
レスポンシブデザインでWebページを制作する際、電話番号の扱いにいつも迷うのでまとめてみました。 電話番号の自動リンク機能を無効化する iPhoneやiPadに搭載されているsafariでは、ページ内の電話番号を自動でリンクに変換し、タップすることで電話をかけることができる機能が用意されています。 しかし、この機能は注文番号やIPアドレス、そのほか電話番号らしき数字で構成された文字列をすべてリンクしてしまうという問題があるほか、Android端末やChromeにはこの機能がないため、ユーザの混乱を避けるためにも無効化しておくのがベターです。 電話番号の自動リンク機能を無効化するには、head部に以下のように追記します。 <!DOCTYPE html> <html> <head> <!-- 電話番号の自動リンク機能を無効化 --> <meta name="format-detection"
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Customizing Style Sheets