sno*_*han 72
------更新------
这不再是iOS7中的问题.Scott Jehl在github scottjehl/iOS-Orientationchange-Fix上有更好的解决方案,适用于iOS6.
------原始答案------
Jeremy Keith(@adactio)在他的博客定位和规模上有一个很好的解决方案
保持标记可扩展
<meta name="viewport" content="width=device-width, initial-scale=1">
然后,禁用了JavaScript的可扩展性,直到gesturestart这个脚本:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
And*_*her 12
Scott Jehl想出了一个出色的解决方案,它使用加速度计来预测方向的变化.此解决方案响应迅速,不会干扰缩放手势.
https://github.com/scottjehl/iOS-Orientationchange-Fix
工作原理:此修复程序通过监听设备的加速度计来预测何时将发生方向更改.当它认为方向即将发生变化时,脚本将禁用用户缩放,允许方向更改正确发生,并禁用缩放.一旦设备朝向靠近竖直方向,或者在其方向发生变化后,脚本将再次恢复缩放.这样,在页面正在使用时,永远不会禁用用户缩放.
缩小来源:
/*! A fix for the iOS orientationchange zoom bug. Script by @scottjehl, rebound by @wilto.MIT License.*/(function(m){if(!(/iPhone|iPad|iPod/.test(navigator.platform)&&navigator.userAgent.indexOf("AppleWebKit")>-1)){return}var l=m.document;if(!l.querySelector){return}var n=l.querySelector("meta[name=viewport]"),a=n&&n.getAttribute("content"),k=a+",maximum-scale=1",d=a+",maximum-scale=10",g=true,j,i,h,c;if(!n){return}function f(){n.setAttribute("content",d);g=true}function b(){n.setAttribute("content",k);g=false}function e(o){c=o.accelerationIncludingGravity;j=Math.abs(c.x);i=Math.abs(c.y);h=Math.abs(c.z);if(!m.orientation&&(j>7||((h>6&&i<8||h<8&&i>6)&&j>5))){if(g){b()}}else{if(!g){f()}}}m.addEventListener("orientationchange",f,false);m.addEventListener("devicemotion",e,false)})(this);
小智 9
希望,这将有助于......
<head>
<style type="text/css">
<!--
/*
I began with the goal to prevent font scaling in Landscape orientation.
To do this, see: http://stackoverflow.com/questions/2710764/
Later, I just wanted to magnify font-size for the iPad, leaving
the iPhone rendering to the css code. So ...
(max-device-width:480px) = iphone.css
(min-device-width:481px) and
(max-device-width:1024px) and
(orientation:portrait) = ipad-portrait.css
(min-device-width:481px) and
(max-device-width:1024px) and
(orientation:landscape) = ipad-landscape.css
(min-device-width:1025px) = ipad-landscape.css
*/
@media only screen and (min-device-width: 481px)
{
html {
-webkit-text-size-adjust: 140%; /* none for no scaling */
}
}
-->
</style>
</head>