我有这样的移动设备 css 代码:
@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>
主要问题是，当我第一次打开我的网站时:在大多数设备上我必须缩放我的浏览器 View 以适应它...
是否可以自动适配设备？例如，如果设备宽度是 340:我应该将它缩小一点(因为网站对于 340 像素来说太大了(它；s min.640px))...如果是 900:那么也应该缩放...
甚至是 ipad(在纵向模式下，因为它的宽度是 768px)。
有可能吗？
傻瓜:
https://plnkr.co/edit/5KhIlmtLkWhtROs7y188?p=preview
和演示:
为什么我有滚动条？我需要以某种方式缩小它，这样我就不会在那里有任何滚动条...... 我的容器应该是 640px 并且没有其他移动设备的值...
最佳答案
使用 HTML5 缩放属性，如下所示。这会将主体缩放到 + 或 -。可以使用任何值。
<body style="zoom:50%;">
关于javascript - 在宽度较小的不同设备上正确使用移动视口(viewport)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34391259/