viewportの物理幅を意識する

<meta name="viewport" content="width=***, initial-scale=**">

このwidthはなんの幅を指定しているのでしょうか？

htmlはviewportをキャンバスとしてレンダリングされます。 レンダリング時のviewportは仮想ウインドウで物理的な幅はありません。 タグに指定するwidthはこのキャンバスの論理幅です。 スマホの物理窓を通して覗くとき、viewportには物理的な幅が必要になります。 表示時、viewportは拡大縮小ができて、その物理幅を決めるのがscaleになります。

• viewport論理幅=width
• viewport物理幅=width*scale
• scaleを省略した場合、scale=デバイス幅/width
• scaleを省略して、width=デバイス幅を指定したとき、scale=1

viewport物理幅がデバイス幅より大きいとページ表示ははみ出し、小さいと余白ができます。 私の場合は、この物理的幅と論理的幅を混同して混乱したようです。 イメージできてしまえばなんてことないですが、一度混乱するとなかなか抜け出せないもので、存外時間がかかってしまいました；