我在这里和网上浏览了许多主题,试图解决我的问题。我非常接近找到解决方案,但有一件事仍然无法正常工作。
我有一个宽度为 640 像素的移动网站。它应该:
- 在所有浏览器上正确显示放大内容,更改设备方向时也是如此
- 用户不应该能够放大(输入字段也不能放大)。
我使用此视口(viewport)元标记来完成此操作:
< meta name="viewport" content="width=640,maximum-scale=0.5,initial-scale=0.5, minimum-scale=0.5" />
这在 Android 上效果很好,无论是纵向还是横向。它在 iO 上的纵向效果也很好,但它在横向显示网站时会缩小,因此它不会适应手机的宽度,而是保持原始的纵向尺寸。我已经在 iPhone 5 和 iPhone 4S 上进行了测试。
我发现大部分问题都与响应式网站有关,而固定移动网站的问题则较少。通过更改视口(viewport)元标记是否可以解决我的问题?或者我应该研究 javascript 来解决这个问题?
提前致谢。
编辑:如果有人感兴趣,我在 Coldfusion 中使用了这段代码,它现在工作得很好(iO 和 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>
最佳答案
我倾向于使用脑海中的这些线条来优化响应式网站:
<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 Web 应用程序运行:
<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="">
希望其中一些能解决您的问题:)
关于android - 移动网站在横向模式下的 Safari 上无法缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18568932/