HTML – 有没有办法设置手机的最小视口大小而不会导致网站放大平板电脑？

概述我一直致力于制作一些强制1000px布局的网站,以提高响应速度.在一个,它可以很好地缩小到~500px,在另一个上它很好地缩放到780px.我的手机是320像素,我的平板电脑大约是1000倍.问题是： >如果我没有设置视口,两个设备都会将页面渲染为~1000px宽,因此我的所有优秀缩放代码都会被完全忽略,并且手机上的页面非常庞大. >如果我设置< meta name =“viewport”cont 我一直致力于制作一些强制1000px布局的网站,以提高响应速度.在一个,它可以很好地缩小到~500px,在另一个上它很好地缩放到780px.我的手机是320像素,我的平板电脑大约是1000倍.问题是：

>如果我没有设置视口,两个设备都会将页面渲染为~1000px宽,因此我的所有优秀缩放代码都会被完全忽略,并且手机上的页面非常庞大.
>如果我设置< Meta name =“vIEwport”content =“wIDth = device-wIDth”>,页面呈现完美,但它开始在手机上极度放大(缩放显示320px的布局).
>如果我设置< Meta name =“vIEwport”content =“wIDth = 780”>,它会在手机上完美呈现和缩放,但放大平板电脑(将布局缩放到780px宽,即使我有1000px到与…合作).

我还尝试了一种JavaScript解决方法：

<Meta ID="vIEwport" name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0" /><script>if (screen.wIDth < 780) {  var vIEwport = document.getElementByID("vIEwport");  vIEwport.setAttribute("content","wIDth=780");}</script>

这适用于Chrome,但不适用于firefox.我甚至尝试使用CSS转换来扩展firefox上的整个页面,但是在缩放页面周围留下了一堆空白(这是一个非常糟糕的解决方案).

有没有办法让设备渲染并缩放到它们的宽度低至500px,然后当它们的屏幕尺寸低于它时缩放和渲染为500px？

解决方法 如果您的内容应至少为780像素宽,请在您的身体上设置最小宽度.

body {  min-wIDth: 780px;}

如果您希望它开始缩小(就像视口宽度为780px一样),请使用缩小到适合：

<Meta name="vIEwport" content="wIDth=device-wIDth,shrink-to-fit=yes">

总结

以上是内存溢出为你收集整理的HTML – 有没有办法设置手机的最小视口大小而不会导致网站放大平板电脑？全部内容，希望文章能够帮你解决HTML – 有没有办法设置手机的最小视口大小而不会导致网站放大平板电脑？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。