幅をスマホに対応した（ただし、固定幅）

2020-11-28 11:53:44

このブログでは、
今までスマホ対応などはしていなかったが、
そろそろやらないとなと思い、
ちょっと考えてみた。

デザインを大幅に変えるのは、
やってやれないことはないと思うが、
レスポンシブにするためには、
左のメニュー部分が200px固定になっているのを、
スマホのときだけレイアウトを変えなければならなかったし、
そこまで踏み込むほどの希望があるわけでもないので、
簡易的に対応することにした。

指定したのは、以下2つ

HTMLの

<meta name="viewport" content="width=1000">

と、CSSの

#entry-body img {
  max-width: 100%;
  height: auto;
}

元々viewportは、
content=”width=device-width,initial-scale=1”
と、おまじないのように訳も分からず書いていたが、
下記を読んで、ようやく意味が分かった。

blog.鶯梭庵/links/改訂版・たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる・その１

これにより、僕のブログは、
「ウェブページの一部または全部でコンテンツの幅が固定されている場合」
に該当するので、
viewportを固定とすることでPCでもスマホでも同様のデザインとなるようにした。

また、そうすると画像が端末幅より小さい場合に、
その分だけ右側が切れて表示されてしまうので、
max-width: 100% を記載することで、
記事表示エリアをはみ出すことがないようにした。

とりあえず今のところはこれで良しとする。



Comments

There are currently no comments on this article, be the first to add one below

Add a Comment

Note that I may remove comments for any reason, so try to be civil. If you are looking for a response to your comment, either leave your email address or check back on this page periodically.