viewport

当网页文档足够宽时，设置 viewport width=device-width 也会出现水平滚动条。可能因为有个最大上限制，超过后，假设屏幕会缩放，则可能完全看不清。因此浏览器选择水平滚动以保持文字的可读性。
现代移动浏览器会自动采用 viewport width=device-width ？？？ 因为不设置这个，也会按这个显示。有待考证。首先如果不设置 meta viewport 标签，那么移动设备上浏览器默认的宽度值为 800px，980px，1024px 等这些，总之是大于屏幕宽度的。这里的宽度所用的单位 px 都是指 css 中的 px，它跟代表实际屏幕物理像素的 px 不是一回事。
以下为个人拙见，虽没官方依据，但帮助了我理解。
width 设置内容的最小宽度（如果内容比你设置的还宽，以内容为准，并且值必须比屏幕宽），这个也是可见像素宽度。
如果不设置缩放，此时一般没有水平滚动条（默认的 initial-scale 会让文档全屏显示）。
若设置 initial-scale，会改变屏幕的水平像素值。如，设置为 1 时，水平像素值为 400px，设置为 0.5 时，水平像素值为 800px。这也是为什么设置了 width 和 initial-scale=1 时，不全屏的原因，因为 width 设置为屏幕宽度数值后（其实很小，不是像素数值，一般由于这个值小于文档本来宽度，故无效），设置 initial-scale=1 时，一屏像素宽度为 400px，显示不完整个文档，当然有水平滚动条。设置 initial-scale 后，会让水平像素值为屏幕宽度的缩放倍数。