我正在开发一个用于移动设备的网站，并且无法通过android手机上的viewport标签进行页面缩放。
纵向旋转电话需要“初始比例= 0.62”，以使页面适合视口。但是，“初始比例= 1”在横向模式下可以正常使用。我正在使用：
<meta name="viewport" content="width=device-width, initial-scale=1">
我希望浏览器将页面缩放到浏览器的视口，而不是我必须捏缩放。手机的视口是纵向和横向，分别是360和640。这可能与页面未纵向缩小到360px并且比例为1时以实际宽度显示页面有关吗？
我刚刚在Firefox中检查了页面，并通过调整浏览器窗口的大小，可以使页面将对象的布局调整为466px，然后再缩小。我使用https://viewportsizes.com/mine/
检查视口大小如果我使用initial-scale = .62，则在iPad上查看的页面看起来过于缩小，并且按钮难以辨认。
有人可以解释如何正确缩放页面吗？
答案 0 :(得分：0)
尝试使用最大比例代替初始比例。当用户从纵向视图切换为横向视图时，最大比例会保留比例设置。
像下面这样：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
或者，您也可以指定宽度：
<meta name="viewport" content="width=360, maximum-scale=1"/>
我猜以下内容适用于iPhone和iPad
<meta name="viewport" content="width=720, maximum-scale=1.0" />
或最后一次尝试
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
此外，还有CSS3媒体查询。