Question

我在这里和网上浏览了很多主题，试图解决我的问题。我非常接近找到解决方案，但有一件事仍然无法正常工作。

我有一个640px宽的移动网站。它应该：

在更改设备方向时，正确显示放大所有浏览器
用户不应该放大（既不输入字段）。

我已使用此视口元标记来完成此操作：

< meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" />

这适用于Android，包括纵向和横向。它也适用于肖像上的iO，但它显示网站在横向上缩小，因此它不适应手机的宽度，但保持原始的肖像尺寸。我在iPhone 5和iPhone 4S上测试了这个。

我发现主要是响应式网站的问题，而固定的移动网站则没有。通过更改视口元标记，我的问题是否有解决方案？或者我应该查看javascript来解决这个问题？

提前致谢。

编辑：如果有人有兴趣，我在Coldfusion中使用了这段代码，现在工作得非常好（iOs＆amp; Android）：

<cfif findNoCase('iPhone', cgi.http_user_agent,1)><meta name="viewport" content="width=640" /><cfelse><meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" /></cfif>

Answer 1

我倾向于使用这些线来优化响应式网站：

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">

也许添加这些可以解决您的问题？

据我所知，iOS Safari在某些情况下表现得很奇怪。以下是我用来修复之前遇到的其他问题的一行：

<!-- This script prevents links from opening in Mobile Safari. https://gist.github.com/1042026 -->
<!--
<script>(function(a,b,c){if(c in b&&b[c]){var d,e=a.location,f=/^(a|html)$/i;a.addEventListener("click",function(a){d=a.target;while(!f.test(d.nodeName))d=d.parentNode;"href"in d&&(d.href.indexOf("http")||~d.href.indexOf(e.host))&&(a.preventDefault(),e.href=d.href)},!1)}})(document,window.navigator,"standalone")</script>
-->

或者，您可以尝试将您的网站作为iOS网络应用运行：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="">

希望其中一些可以解决您的问题：）

移动网站无法在横向模式下放大Safari

1 个答案: