メタタグのviewportで解決。幅1000pxで制作していたサイトをiPhoneやiPadで見ると、どうしても画面外に余白ができてしまう現象が起こった。検索してもジャストな答えが出てこなかったのでメモっときます。name=”viewport”>headに上記の一行いれればOKです。本文中にメタタグ書いても有効になってしまうので、上記の「<>」は、半角で書きなおしてください。幅1000pxでサイトを制作してます。このサイトはレスポンシブwebデザインではなく、ユーザーエージェントでの切り替えも無しで、PC版のトップページをモバイルでも使うって仕様です。PCでは、しっかりと幅1000pxで作ってあるのが確認できたサイトですが、iPhoneやiPadで見るとどうしても右側に余白ができてしまいました。ページを開いた直後は上図のように表示されます。上手いこと表示されているようですが、ブログの右端が画面外にいってしまってます。右スクロール(スワイプ)できる状態です。全体を見せられず、すみませんフッターは幅1000pxですが、ヘッダーの緑のラインとブログの右端が、上図のように、はみ出てます。参考にしたサイトこのブログはレスポンシブ対応なので、viewportについて詳しく知りませんでしたので、ググりました。詳しく解説してくれているサイトはあるのですが、今知りたい情報は少し違う...ということで、上手く表示されているサイトからパクろうを参考にしようと思い、レスポンシブwebデザインやユーザーエージェントでモバイル切り替えをしていないブログをいくつか見たのですが、「viewport」の設定はしてませんでした。有名どころでパソコンサイトをモバイルでも見せているサイトといったら、もうあそこしかありません。appleで、Appleのサイトのheadを確認。ビューポートありました。実装viewportというのは、モバイルデバイスの画面幅を何ピクセルとして偽装するか?みたいな機能です。サイトさんのところに来たiPhoneくんに下記のように言ってるような感じです。サイトさん「こんにちはiPhoneくん、きみの画面幅は320pxだけど、それを1024pxのつもりで表示させるよ。横向きにしたら568pxだけど、それでも1024pxのつもりで表示させるよ。...やっぱりわかりにくい。要はギュッと縮めて表示させるのです。name=”viewport”>をheadに書き足しました。見せられず、すみませんこのようになりました。ページ幅が1000pxなので、viewportのwidthも1000にしたのですが、少し余白があった方がいいと思ったので1024pxにしました。昨夜、帰ってくる途中で15台くらいの暴走族を見かけました。珍しかったので記念に写真を撮りました。三段シートというものです。「3段」なのか調べてみました。運転者の着座部、後席乗員の着座部、後席乗員の背もたれ3段で構成されていることからこのように呼ばれる。wikipediaだそうです。通りすがりに撮ったので、被写体に掲載許可を頂いてません。不都合でしたら削除しますのでご連絡ください。HTML/CSS/JS作成者:けんコメントを残す返信をキャンセルする。仕事に集中するためのホストのいじり方グアムのドコモパシフィックのプリペイドSIMカードを使ってみました【画面ハミ出し対策】レスポンシブでタブレットとPCは同じデザインにする方法ブログをリニューアルしました。ERR_EMPTY_RESPONSEの原因はCloudFlareとESETの相性。豪華客船クイーン・エリザベスが横浜大桟橋に初入港。(7)ABOUTmiz2403.comはテーマを絞らない雑記ブログです。ブログを開始した頃はWebマーケティングやホームページ制作の話が多かったのですが、いつのまにかデジモノやネットウォッチ、横浜の事や音楽などについても書くようになりました。詳細や書いている人についてはmiz2403.comについてをご覧ください。miz2403.com。