青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。プログラミング初心者。

スマホ対応させようとがんばった結果わかったこと

iPhone7は画面の横幅375pxだけどRetinaだから750px…??

だと思ってたんですよ。 だから、

@media screen and (max-width: 768px)

スマホを切り分けて、

width: 750px

にすればiPhone7だとぴったりで表示される!!!

と、思っていました。

現実は甘くなかったですねはい。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

これでwidthがデバイスの横幅になるみたいなので(元々指定してた…) widthは横幅が最初に決まってそこから横幅が変わることのないスマホは100%を指定しておけば大丈夫そうだ、とわかりました…

750px前提でワイヤーフレーム作ってたので、 iPhone SEとかで320pxだし、それで表示できるようにすればちょっと表示面積大きくなってもiPhone7にも対応できるはずなので、 ワイヤーフレーム設計し直します…笑