移动网站响应缩放有充分的手机宽度

假设在体内的所有元素可拉伸至100％ - 除了做这样的事情：移动网站响应缩放有充分的手机宽度

body { 
    overflow-x:hidden; 
    width:320px; 
} 

@media all and (min-width: 360px) { 
    body { 
     width:360px; 
    } 
} 

@media all and (min-width: 369px) { 
    body { 
     width:369px; 
    } 
} 

@media all and (min-width: 480px) { 
    body { 
     width:480px; 
    } 
} 

@media all and (min-width: 533px) { 
    body { 
     width:533px; 
    } 
} 

@media all and (min-width: 569px) { 
    body { 
     width:569px; 
    } 
} 

@media all and (min-width: 640px) { 
    body { 
     width:640px; 
    } 
}

是否有更好的/更少硬编码方式比以上？

而且，存在关于在移动使用这种混合的观点：

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

读取纵向和横向之间的初始比例（缺陷）已被固定在IOS 6 iPad和因此上述不再需要...

但是，我可以认为这仍然是需要在新的和旧的iPhone以及Android和三星其他移动设备？

来源

2013-03-22 bcm

多媒体查询带来了很大的灵活性。我相信特定的设备/模型检测对于可维护性来说是不理想的，因为只会有更多不同的尺寸规格可以满足。 – bcm 2013-03-24 03:14:49

发现问题。所有的媒体查询是不需要网站全宽（虽然这是一个相当广泛的列表，涵盖大多数设备）。

就在下面足以作为我最初计划（溢流-x只是保险）：

body { 
    overflow-x:hidden; 
    width:100%; 
}

但是我有位置处的第二水平nav元素：绝对的，左：100％和宽度： 100％，这是扭曲了手机上的实际网站宽度（导致一个非常宽的网站，可能与手机的分辨率一样宽）。

一旦元素的左边位置仅由JavaScript设置（而不是在初始网站加载时由电话读取），问题就解决了。

学习到的经验是在移动时注意位置绝对元素，即使溢出隐藏，这些可能会扭曲手机识别的实际站点宽度。

我还必须包括元视口的手机...... 虽然广泛接受的iPad网站缩放的答案，以及有宽度=设备宽度和初始规模实际上搞砸了我的网站之间的纵向景观缩放iPad上的最新操作系统。

这并不意味着缩放完美！需要在iPhone（最新操作系统）上进行测试，以确定其行为是否像iPad（定位错误旨在修复）。

<meta name="viewport" content=""/> 
<script> 
if (!navigator.userAgent.match(/iPad/i)) { 
    var viewportmeta = document.querySelector('meta[name="viewport"]'); 
    if (viewportmeta) { 
     viewportmeta.content = 'width=device-width, initial-scale=1'; 
    } 
} 
</script>

来源

2013-03-29 07:00:07 bcm

移动网站响应缩放有充分的手机宽度

回答

相关问题