viewport設定で解決 iPhoneやiPadの右側にある余白

公開日:2013年10月14日 

viewport設定で解決 iPhoneやiPadの右側にある余白

メタタグのviewportで解決。幅1000pxで制作していたサイトをiPhoneやiPadで見ると、どうしても画面外に余白ができてしまう現象が起こった。


検索してもジャストな答えが出てこなかったのでメモっときます。
先に結論から。

<meta content=”width=1024″ name=”viewport”>

headに上記の一行いれればOKです。
本文中にメタタグ書いても有効になってしまうので、上記の「<>」は、半角で書きなおしてください。

現象 iPhoneやiPadで開くと画面外に余白が発生

幅1000pxでサイトを制作してます。
このサイトはレスポンシブwebデザインではなく、ユーザーエージェントでの切り替えも無しで、PC版のトップページをモバイルでも使うって仕様です。

PCでは、しっかりと幅1000pxで作ってあるのが確認できたサイトですが、iPhoneやiPadで見るとどうしても右側に余白ができてしまいました。

ページを開いた直後は上図のように表示されます。一見上手いこと表示されているようですが、ブログの右端が画面外にいってしまってます。
なので、少しだけ右スクロール(スワイプ)できる状態です。

saisho

全体を見せられず、すみません

フッターは幅1000pxですが、ヘッダーの緑のラインとブログの右端が、上図のように、はみ出てます。

参考にしたサイト

このブログはレスポンシブ対応なので、viewportについて詳しく知りませんでしたので、ググりました。詳しく解説してくれているサイトはあるのですが、今知りたい情報は少し違う…

ということで、上手く表示されているサイトからパクろうを参考にしようと思い、レスポンシブwebデザインやユーザーエージェントでモバイル切り替えをしていないブログをいくつか見たのですが、「viewport」の設定はしてませんでした。

有名どころでパソコンサイトをモバイルでも見せているサイトといったら、もうあそこしかありません。

apple

applevp

で、Appleのサイトのheadを確認。メタ ビューポートありました。

実装

viewportというのは、モバイルデバイスの画面幅を何ピクセルとして偽装するか?みたいな機能です。サイトさんのところに来たiPhoneくんに下記のように言ってるような感じです。

サイトさん「こんにちはiPhoneくん、きみの画面幅は320pxだけど、それを1024pxのつもりで表示させるよ。横向きにしたら568pxだけど、それでも1024pxのつもりで表示させるよ。」

ってことです。…やっぱりわかりにくい。要はギュッと縮めて表示させるのです。

ということで、<meta content=”width=1024″ name=”viewport”>をheadに書き足しました。

jissou

いろいろ見せられず、すみません

このようになりました。

ページ幅が1000pxなので、viewportのwidthも1000にしたのですが、少し余白があった方がいいと思ったので1024pxにしました。

以上です。


昨夜、帰ってくる途中で15台くらいの暴走族を見かけました。珍しかったので記念に写真を撮りました。

bousouzoku

すごいシートですね。三段シートというものです。なぜ「3段」なのか調べてみました。

運転者の着座部、後席乗員の着座部、後席乗員の背もたれ3段で構成されていることからこのように呼ばれる。
wikipedia

だそうです。
通りすがりに撮ったので、被写体に掲載許可を頂いてません。もしが不都合でしたら削除しますのでご連絡ください。


コメントを残す