最初我使用了元标记:
<meta name="viewport" content="width=device-width,
initial-scale=1.0/>
使用此标签时,在初始加载时,页面在横向模式下看起来很好,但是当我将方向更改为纵向并返回横向模式时,页面会缩小。
然后我在我的页面上尝试了以下元标记:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
虽然页面适合横向模式,但我没有看到滚动条在纵向模式下查看更多内容。
我是否需要使用媒体查询来使页面适合横向和纵向模式,或者是否有元标记可以帮助实现这一目标?
答案 0 :(得分:1)
我找到了一个很好的解决方案:
元标记:
<meta name="viewport" id="viewport" content="width=device-width,minimum- scale=1.0,maximum-scale=10.0,initial-scale=1.0" />
JavaScript with jQuery:
var mobile_timer = false;
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum- scale=1.0,initial-scale=1.0');
$(window).bind('gesturestart',function () {
clearTimeout(mobile_timer);
$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=10.0');
}).bind('touchend',function () {
clearTimeout(mobile_timer);
mobile_timer = setTimeout(function () {
$('#viewport').attr('content','width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0');
},1000);
});
}
该脚本基本上不允许在iPhone上进行缩放,除非检测到手势,只需在你的html中提示它,你应该好好去;) 资料来源:http://www.ternstyle.us/blog/reset-iphone-zoom-on-orientation-change-to-landscape
我还为iPhone设置了此媒体查询
@media screen and (max-device-width: 480px)
{
html
{
-webkit-text-size-adjust: none;
}
}