ios10中使用viewport适配移动端，横屏后，再次旋转屏幕，页面宽度还是横屏的时候的宽度，怎么解决

Question

如题，在ios10中，使用

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">

进行移动端适配，横屏后，再次旋转屏幕，页面宽度还是横屏的时候的宽度，并没有等比缩放。是什么原因呢

Answer 1

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">
你这个标签，width=750？试试换成

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

width=device-width 表示内容和设备的大小动态匹配

如果还不能解决，有可能你实用了iframe标签。
也有可能你有些外层元素实用了相对定位

Answer 2

因为你设置了 width 为固定值
你可以用：

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

target-densitydpi=device-dpi 只对 Android 有效，以后要被弃用，建议不要使用。target-densitydpi

Answer 3

看看手淘的适配方案把，还有meta标签的content="width=750是干什么的你就知道了

Answer 4

<meta name="viewport" content="width=787,user-scalable=no,initial-scale=1.0">
其中787是设计稿的宽度