HTML5 Viewport元标签在纵向模式下的安卓手机上不起作用

Question

我正在为移动设备开发一个网站，在android手机上通过viewport标签进行页面缩放有问题。

竖屏电话旋转需要"initial-scale=0.62“才能使页面适合视口。然而，"initial-scale=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上查看的页面看起来太过缩小，按钮很难辨认。

有人能解释一下如何让页面适当缩放吗？

Answer 1

尝试使用maximum-scale而不是initial-scale。当用户从纵向视图切换到横向视图时，最大比例保持比例设置。

如下所示：

 <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媒体查询。