スマホランディングページの画像隙間。CSSで解決できない落とし穴。




いつものようにせっせとスマホ用のLPをコーディングしていたら画像と画像に1pxの隙間がある事が分かった。

画像は背景画像に1pxの線を合成したもの。実際の確認でもこのような線が出る場合がある。

でも、おかしい。

いつもはこのような隙間はでないのに・・・
CSSリセットが効いていないのかなとファイルを見直しても問題がない。
画像の縦幅が奇数なのかなと画像ファイルを見直しても問題がない。
※画像を偶数の縦幅でスライスする事で半分の解像度で表示されても奇麗に線が表現できます

1pxの線を半分の解像度で表現すると0.5pxでぼやけた線になるのです。

これが落とし穴!

では、なにが問題なのか。
原因はこれ。


画像はGoogle Developer Tools でスマホサイズを確認したもの。

iPhone6でコーディングすると750pxの半分で表示されるから、375pxになるのになにこの数値???

CSSや画像幅でもないこの原因の正体はmetaの記述でした。
iPhone6から横幅が750pxだから画像の切り出しを750pxにしていただけというミスで、結局metaで全体を320pxで自動制御させていたので意味ないことを続けていたというお話。

で、この問題を解決するmeta情報はこれ。

【正】

【誤】

これできれいに表示されます。

やれやれだぜ。

この記事はここまで!

ここからはよく読まれる記事をまとめてご紹介します。
ひとあじ違うデザインノウハウに出会えるかもしれません。

【化粧品・コスメ】乾燥肌訴求のランディングページ(LP)デザイン5選

2018.09.23

【たった1問】遷移型アンケートページの構成とデザインを調べてみる

2018.09.01

【男性編】薄毛・育毛・増毛商材向けランディングページ(LP)デザインについてまとめてみた

2018.08.05

ランディングページ(LP)にエディトリアルデザインを取り入れる。ふきだし装飾編

2018.07.08

【年齢訴求別・5選】健康食品(ダイエット)のランディングページ(LP)ファーストビューとCVエリアデザイン

2018.06.17

CVエリアデザインのポイント。改善できればランディンページ(LP)は強くなる。

2018.05.27

電通グループが開発したAIのバナー自動生成ツールADVANCED CREATIVE MAKER β版のプレスで感じた事

2018.05.20

ランディングページ(LP)にエディトリアルデザインを取り入れる。マーカー編

2018.05.04

デザイナーとしてひと味違うランディングページ(LP)構成案の制作方法

2018.04.01

いつのまにか「Font Awesome」が新しくなってたので調べてみた

2018.03.11

動画ランディングページ(LP)効果改善への道は映像業界を理解する事からはじまる

2018.01.14


お気に入りの情報
が無かったでしょうか?
この記事の最後には、今までのデザイン情報やノウハウをレコメンド形式でご紹介しています。

お求めの記事に出会えますように。



スポンサード広告 by google