コスメ水槽waterTank

30代・乾燥肌の管理人の年齢肌対策。スキンケアコスメの紹介と、時々メイク。綺麗なおばさん目指します。

[Stinger5]iPhone6Plusで左右に余白が出ちゃうのを直したよ

 

20151012_05

iPhone6Plusでこのブログを表示すると、なんか左右のpaddingが広い(広かった)。どうも、スマホではなくタブレット判定されているようでした。このブログだけではなく、Stinger5使っている他のブログさんもそう。
とはいえ、6+と同じような大きさのGalaxyではちゃんと表示できてるっぽいし、女性で6+使ってる人あまり見たことないので、原因を探ることもなく放置していました。

が、6sPlusも発売されて周りの女性も大きいサイズのiPhoneに買い換え始めているので、ほっとくわけにもいかず、直しました。

目標

これが

IMG_0190s




こうなる。

IMG_0191s


Chromeのブラウザエミュレーションで見てみるとこうなってる。

20151012_01 20151012_02

iPhone6Plusでは左右のpaddingが40px。他のスマホでは10pxなので、それにならいたい。

修正するソースファイル

ここで使用しているStinger5はver20150505です。

  • style.css

media Queries タブレットサイズを修正 - style.css

修正前

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 380px) {

修正後

/*media Queries タブレットサイズ
----------------------------------------------------*/
@media only screen and (min-width: 415px) {
20151012_03 20151012_04

もともとStinger5では横幅380px以上をタブレットとみなして、mainのpaddingを40pxとしています(横幅380px未満は左右のpaddingが10px)。

iPhone6Plusの標準ブラウザ解像度は横414px。380を超えているので、タブレットとみなされていました。iPadくらい大きい画面なら左右のpadding広めでもいいですが、6+程度のサイズだと、1行の表示文字数がだいぶ少なくなっちゃうな~と思いました。

とりあえず今はiPhoneの6+ と 6s+だけに対応した修正ですけど、どこまで対応すればいいのかな(泣) プロでWebデザインやってる人は本当にすごいと思う。

参考にしたサイト

 - ブログひっこし ,