正确使用不同装置上移动视口的具有小宽度

问题描述：

@media all and (min-width: 0px) and (max-width: 991px) {...}

和我有这样的HTML：

<meta name="viewport" content="width=1024, initial-scale=1" id="viewportMt"> 

<script> 
    window.onload = function() { 
    if(screen.width < 970) { 
     var vp = document.getElementById('viewportMt'); 
     vp.setAttribute('content','width=640, initial-scale=1'); 
    } 
    } 
</script>

的主要问题是，当我首先打开我的网站：在大多数设备上，我必须缩放浏览器视图以适应它...

是否可以自动适应设备？例如，如果设备宽度为340：我应该扩大一点点（因为网站是为340px（it; s min.640px）大）...如果900：那么规模太...

甚至iPad（纵向模式，因为它的宽度是768px）。

有可能吗？

plunker：

https://plnkr.co/edit/5KhIlmtLkWhtROs7y188?p=preview

和演示：

为什么我有滚动条？我需要以某种方式放大出来，这样我不会有任何有滚动条... 和我的容器应为640像素，并为移动设备没有其他值...

您是否尝试添加最大宽度和高度的css 100％？ –

你在这里混合了两件事。一个是使用css响应式@ @ media'查询和其他静态视口宽度来缩放网站。你究竟想在最终结果中达到什么目的？具有本机设备分辨率的响应网页或根据设备宽度缩小整个页面？ – user151496

@ user151496'根据设备宽度缩小整个页面，但最小宽度... – brabertaser19

答

这是我用我所有的响应Web应用程序。

<meta name="viewport" content="width=device-width, initial-scale=1">

答

如下所示使用HTML5变焦性能。这会将身体放大到+或 - 。任何值都可以使用。

<body style="zoom:50%;">

但它有点“硬编码”...对于iphone4 - 这是好的，但对ipad不好;） – brabertaser19

如果它已经适用于您，请将它标为答案，因为它会定期出现在我的个人资料页面中。 –

答

可以使用HTML5变焦：

body { 
    -moz-transform: scale(0.8, 0.8); /* Moz-browsers */ 
    zoom: 0.8; /* Other non-webkit browsers */ 
    zoom: 80%; /* Webkit browsers */ 
}

为支持的浏览器见http://www.browsersupport.net/CSS/zoom。

那么你可以写一个JS函数来选择正确的缩放量。

但它有点“硬编码”... 为iPhone4 - 这是好的，但对iPad不好;） – brabertaser19

你是什么意思？你可以写一个带有数学公式的JS函数来选择我认为正确的变焦量。 – anned20

不...这是一个坏主意......我不需要缩放身体，只能缩小视图... – brabertaser19

答

尝试

Zoom:0.5;

不使用百分比值或者设置

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

initial-scale = 0.5 - 这对所有设备都适用？ – brabertaser19

它可能应该 –

正确使用不同装置上移动视口的具有小宽度

相关推荐