捏合/缩放视口规范适用于iPhone但不适用于Android

我从一家帆船公司xssailing.com回来制作了一个WordPress网站,目前将视口设置为:

<meta name="viewport" content="user-scalable=yes;width=device-width; initial-scale=0.31; maximum-scale=1.0;"/>

该网站在计算机上运行良好,我可以在iPhone / iPad上捏合和缩放.当我用我的点燃访问该网站时,我无法像其他网站那样捏和缩放.有任何想法吗?

谢谢!

解决方法:

你是对的,它不会缩放.使用默认浏览器在Nexus S上进行测试.

Safari为这个标签定义了非常愚蠢的默认值(宽度恰好是960像素,完全适用于不再制作的旧iPhone).因此,您需要明确指定最小规模.通过指定所有三个缩放参数(而不是3个中的2个),您的页面可以正常缩放:

<meta name="viewport" content="
user-scalable=yes;
width=device-width;
initial-scale=0.31; maximum-scale=1.0; minimum-scale=0.25"/>

在尝试缩放之前,还要等待整个页面完全加载.

请注意,这将是一个更强大的Stack Exchange问​​题,带有完整的最小示例,并且没有指向特定网站的垃圾链接.问题和答案的适用性越广越好!

上一篇:Viewport


下一篇:读取解析预览pdf文件的插件之pdf.js