HTML页面宽度异常问题

一、问题

写了一个HTML,发现宽度在手机上显示的不同,有的手机上会是这样:

有的会是这样:

二、影响因素

• webkit-text-size-adjust
  这是一个CSS属性，控制手机、平板浏览器上的文本溢出算法。大致意思就是网页设计好后可能并不适应手机、平板的屏幕大小，因此手机、平板的浏览器自行对文本溢出的方案做了调整以适配手机、平板的屏幕。
  关闭浏览器的这个行为：

-webkit-text-size-adjust: none;

• viewport
  一个叫视区的概念。
  还说到手机、平板浏览器。网页设计之初比较宽，手机屏幕比较窄，如果把网页塞到手机的屏幕就会显得比较挤，因此，手机、平板浏览器就发出一个声明说，“我的宽度是800（实际手机屏幕宽度可能是500）”，网页放到800的宽度上就不会显得那么挤了。

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

因此在适配不同移动设备时需要考虑以上两个影响实际视觉效果的配置。

参考

1. text-size-adjust - CSS（层叠样式表） | MDN
2. 响应式 Web 设计 – Viewport | 菜鸟教程