スマホサイトを横向きにした時の両端の余白を消す方法

目次

悩み

スマホサイト(iPhoneサイト)を実機テストで見てみると、 横向きにした時に、両端 が白い余白が出てしまう。

解決策

viewport-fit=cover をhead内に記述

 

具体的な方法

下記htmlソースコードをコピペ!

 

スマホサイト側

<head>
省略
<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>
省略
</head>

 

参考

https://yumeirodesign.jp/blog/201709/building-iphonex-2017.html

 

以上、自分へのメモ代わり&お困りのサイト制作者へシェアしておきました。

困ったらお互い様。

Webサイト制作者同志、より良いサイトを世の中に広めて、より価値あるサイトをユーザー(訪問者)に届けて行きましょう!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

売れる仕組みを創り、Webで売上アップさせる
株式会社WebSanta 代表取締役
 
幼少期、何も誇れる能力も無く、自分に自信が無い日々を過ごす。
小中高校時代、父の3億の借金、生死をさまよう交通事故、大火傷、彼女の死にも遭う。
それらをキッカケに「たった一度の人生、悔いなく生きたい!」と心に決める。
しかし、大学時代、バレンタインデーに当時の彼女にフラれ、自殺しようと銃社会アメリカに渡るもシリコンバレーのIT革命に魅せられ帰国。
 
ケンブリッジ大学語学留学、東京理科大学経営学部経営学科、すごい起業塾、ビジネスコンテスト優勝を経て、株式会社WebSantaを設立。
総額600万円の詐欺やうつ病に遭いながらも、起業12年・相談1000人・サイト制作100件・セミナー100回・総売上3億に貢献。
 
使命は「起業家に未来を届ける」
ビジョンは「Webマーケティングで起業家のビジネスを革新させる」
夢は「悲しい倒産を無くす」こと。

コメント

コメントする

目次