Question

我正在建立一个响应iPhones的网站。要使用元标记将屏幕缩放到屏幕比例：

meta name="viewport" content="width=device-width; initial-scale=1.0; 
maximum-scale=1.0;"

缺点是这个标签还可以防止iPad放大和缩小，有没有办法可以放大iPad但不能放大iPhone？

Answer 1

我同意你最好在服务器端做这件事用PHP

<?php
    // we only give the viewport if it is not an iPad:
    if(!(bool) stripos($_SERVER['HTTP_USER_AGENT'],'ipad')) { ?>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<?php } ?>

但如果您觉得有必要，也可以使用Javascript（但不知道为什么？因为它不可靠！）

if (navigator.userAgent.match(/iPad/i) != null) { } else {
document.write('[meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;  " /]');  
}

替换[with a＆lt; ...因为我不确定为什么在StackOveflow编辑器中转义标签。

Answer 2

您是否不能使用某种服务器端语言（PHP，ASP等）来检测浏览器用户代理是什么？ iPhone和iPad有两个不同的用户代理字符串。只有当您检测到用户代理是iPhone时，才会设置元标记。

可以通过Google搜索“iphone用户代理字符串”和“ipad用户代理字符串”找到典型的用户代理字符串。

Answer 3

由于它与您所指的页面相同，因此您无法真正控制前端的缩放行为。

您可以使用2个单独的JSP来编写相关的元标记，然后根据请求来自用户代理字符串的位置动态地包含它们。

你必须再次使用某种服务器端技术来实现你想要的......

如何在iPad上允许页面缩放而不是iPhone

3 个答案: