2020年1月18日(土)
スマホは表示幅360pxでデザインする #■子猫の手 スマホでは、表示幅360px相当に統一しているつもりでしたが、誤解により、少し異なっておりました。
iPhone
XS
Maxにおいて、デバイス表示幅は414pxですが、safariブラウザで<meta
name="viewport"
content="width=device-width,
initial-scale=1.0">としてデバイス幅に合わせると、body幅が360px、左右にmarginが8pxずつとなり、中央揃えになります。合計376pxとなり、真のデバイス表示幅414pxに合致しません。
iPhone
X,
XS,
11
Proは、デバイス表示幅は375pxなので、body幅が360px、左右合わせてmarginが15pxと推測できます。
スマホでは、デバイス表示幅が多少増えても、ブラウザでは表示幅360pxで、文字は12pt(16px)で表示すると認識しました。
実は、この方が好都合です。この認識に合わせて、『子猫の手』の表示幅を微調整します。
なお、らくらくホンは、解像度240×320です。G3通信がもうすぐ終了で、デバイス幅360pxのらくらくスマートフォンに移行していくと考えています。文字の大きさを調整せずに表示することにします。罫線組や文字絵など、レイアウトが崩れますが、致し方ありません。足切りではないので、ご勘弁を。
スマホにおけるブログの基本は、枠を含めて幅360px、文字12pt(16px)22文字で352pxとします。
ブログのスタイルを、デバイス幅で５種類に分岐します。数学的な分岐でなく、現存機種を考慮した分岐になります。
--
664px以上（タブレット、パソコン）…実際は480px以上で分岐
marginそのまま
文字12pt(16px)40文字=640px
線3px
余白4px
360pxより大（スマホ：375px,
414px）
marginそのまま
文字12pt(16px)22文字=352px
線3px
余白4px
360px（スマホ）
margin0px
文字12pt(16px)22文字=352px
線3px
余白4px
320px以上（スマホ：iPhone5c
320px）
margin4px
文字10.5pt(14px)22文字=308px
線3px
余白4px
320px未満（らくらくホン：240pxと仮定）
margin8px
文字12pt(16px)14文字=224px
線3px
余白4px
※余白5pxで丁度なのですが、上手くいかないので、余白4pxにしました。
--
つまり、線[border]と余白[padding]を固定して、下記のようにします。
--
m*
b2
p2
text(12pt||10.5)
p2
b1
m*
*:
設定無し(8)
||
0
||
2
||
4
--
数pxの変化で、重箱の隅を突くような設定ですが、すべてのスマホにおいて同様なレイアウトで観れることは、大変重要なことです。自分的には、昨年9月末から悩んでいたことが、全部解決しました。先に進めます。
ガレコレのこのホームページに導入済みです。お客様は、今しばらくお待ち下さい。
P.S.
パソコンにおけるブログ幅を600pxから640pxに変更しました。幅広にしない訳があります。
15.1インチ1366x768のノートパソコンにおいて、拡大200%表示で、表示幅に収まります。また、一行40文字程度が、間延びせず読みやすいと言われています。
P.S.2
下記は、ブログ文字数のテスト。
１２３４５６７８９０１２３４５６７８９０１②３４５６７８９０１２３４５６７８９⓪１２３４５６７８９０
P.S.3
スマホを横置きにした場合、逆に行の文字数が増えるので、罫線組や絵文字のレイアウトに問題は生じません。
P.S.4
『子猫の手』利用者は、表示幅を、パソコン・タブレットは約640px、スマホは360pxの２種類のみ考慮すれば良いことになります。全く考慮しなくても作成できると謳っているサイトもありますが、お粗末なものです。
お問い合わせ