iOS 9（iPhone）のSafariでviewportが効かない？ページが縮小表示されたり、挙動がおかしい場合の対策 作成：2015-10-08 更新：2015-10-22 iOS 9（iPhone、iPod touchなど）のSafariでviewportを設定したページが縮小表示される場合の解決策。 対象 ： iOS 9.0.2など iOS 9のSafariの不具合？ iOS 9にアップデートしてからSafariで自分のサイトを見ていなくて気づかなかったが、今日たまたま自分のサイトを見たら変な動作に気づいた。 ページをいったん縮小表示してから、本来のサイズに戻ったり戻らなかったり。 私のサイトはスマホで閲覧した場合、viewportにより端末に適したサイズで表示されるようになっている。 とりあえずTwitterで「Safari viewport」と検索してみると、案の定問
Updated 2014.11.01 / Published 2014.03.11 The minimal-ui viewport property is no longer supported in iOS 8. ということで、minimal-uiはiOS8からは早速サポートされなくなり、iOS7.1限定のものすごく短命な機能となりました。 iOS 7.1がリリースされました。いろいろ改善されたり不具合がなおっているとのことですが、職業柄、特にiOSのSafariについてのチェックはかかせないため、チェックしていた最中に見つかったiOS7.1 Safariにおいていくつか注意すべき点を報告いたします。特にhtml, bodyともに高さ100%のコンテンツを作成している場合にiOS 7.1から指定できるようになったminimal-uiを指定すると、深刻な不具合が生じることを警告いたします。
iOSにおけるviewportの指定方法による細かい違い iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。 検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。 まず、以下のような数値によるviewport指定をPCモードとし、 <meta name="viewport" content="width=960px"> 以下のようなdevice-widthによるviewport指定をSPモードとして解説を進めていきます。 <meta name="viewport" content="width=device-width"> ズーム率 ピンチインピンチアウトで拡大できる上限は、PCモードでは15倍、SPモードでは5倍まで拡大可能です。 ダブルタップの挙動 テキストが記述された要素などをダブルタップすると、PCモード、
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
続：Androidブラウザでviewportのwidth指定 １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", function(){ if(Math.abs(window.orientation) === 0){ if(/Android/.test(window.navigator.userAgent)){ if(!portraitWidth)portraitWidth=$(window).width(); }else{ portraitWidth=$(window).width(); } $("html").css("zoom" , por
ものすごいお久しぶりです。実に半年ぶりとか。。 最近仕事でAndroidアプリをやってることもあり、興味がHCDとかUXDとかIxDとかUIデザインとかユーザビリティとかに寄ってきています。それもあって「ブログでなに書いたらいいん!?」というこれまで何度も何度も何度でもなった症状に懲りずにかかって半年、というのが近況です。 ただそろそろ書きたいなと思ってきたので、とりあえずやる気が起きた時に書けそうなことから。CSS Nite LP16に行ってきました。 今年の頭にはiPhone/iPad特集として、CSS Nite LP13、CSS Nite LP13 repriseが開催されました[1]。今回は、スマートフォン特集(2)と題し日本でもイキオイ激しいAndroid特集です。以前のレポートほどがっつりしたものじゃなくて、気軽に、備忘録として、くらいな気持ちで書いていきます。 Android
width=device-width, initial-scale=1で、iPhoneを縦→横に傾けたら、 「1.5倍にズームした状態でさらにドキュメントの幅が480pxになる」 という謎の挙動を理解してみる。 viewportについては、Androidの動きを正と見て、iPhoneの挙動を理解したほうが容易。 initial-scaleとwidthを同時に指定した場合がめちゃくちゃにややこしい。 initial-scaleは、PCのブラウザいうとズーム機能に近いが、それによりドキュメントの幅が調節される。これは例えば、PCブラウザで幅600pxのサイトを表示した場合をイメージすると想像しやすい。幅600pxのサイトであっても、ブラウザのウィンドウ幅が1000pxであれば、 ドキュメントの幅は1000pxになるみたいな…。 なので、「meta viewportのwidthは表示領域(vie
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
tacamy @tacamy まじAndroidなんなの…。同じOSのバージョンでも機種によってぜんぜん違うんですけど…。ただ、WebClipアイコン置きたいだけなのに…。 2011-03-07 18:24:37
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
