Mobile 如何在支持CSS3的网站上支持更多移动视口宽度，并强制移动浏览器使用适当的宽度？

我有固定宽度为1000px的网站。我想支持这个页面的2个较小的宽度。我通过CSS媒体查询成功地做到了这一点，如下所示：

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

现在，当我在Android浏览器（2.3.3）上测试我的网页时，它使用1000px的视窗宽度，所以它可以全宽显示网站。但若它选择800px的视窗宽度，那个就更好了，因为网页的显示会更适合于较小显示器的设备

我知道我可以使用设置视口宽度，例如：

，或者使用：

设置与设备物理宽度相关的宽度，但这些都不起作用。因为在第一种情况下，它将强制所有移动设备始终使用800px视口，或者在第二种情况下，它将使用设备上像素的物理宽度，但这也行不通，因为在纵向模式下（大多数人浏览移动网络和使用手机的方式），它将是300px或最多400px，这是太小，用户将不得不滚动水平很多

所以实际上我的问题是-我能支持并可能强制移动浏览器根据其实际屏幕大小使用不同的视口宽度吗？我不知道我的解释是否足够恰当，因此我将举例说明我想要实现的目标：

对于物理宽度为400px的移动设备（具有更大显示器的现代设备），我希望强制使用800px宽度的视口，并且可能具有0.5的缩放比例，因此在第一页访问时将完全显示，而无需水平滚动，并且用户可以选择放大页面的部分

对于物理宽度为300px（一些中产阶级和低端设备）或更小的移动设备，我想强制使用600px宽度的视口，并且可能具有0.5的缩放比例，因此在第一次访问时，将在屏幕上显示全部或至少大部分，几乎不需要水平滚动。当然，用户可以放大页面的某些部分

是否可以仅使用CSS或CSS3进行设置？我可以想象JS解决方案，但我想用CSS实现它

---

感谢您提前提供的帮助。

我确实理解您的部分问题……我主要在iPhone/iPad设备上工作，而在Android设备上工作的较少

我建议使用

<meta name="viewport" content="width=device-width" />

根据devoce width设置视口的步骤

现在，即使你说，它不会改变方向，在iPhone/iPad上，无论方向如何，设备宽度总是768px

因此，至少在这些设备上，设置为设备宽度是可以的

对于Android设备，我不确定设备宽度是否在每个方向上返回不同。。 我猜应该是一样的

你能试着把meta标签设置成上面的样子，看看它是否工作正常。如果没有的话，我可以提出其他的建议

---

谢谢。

这里有一些Css可以帮助您：

// target small screens (mobile devices or small desktop windows)  
@media only screen and (max-width: 480px) {  
/* CSS goes here */  
}  

/* high resolution screens */  
@media (-webkit-min-device-pixel-ratio: 2),  
         (min--moz-device-pixel-ratio: 2),  
         (min-resolution: 300dpi) {  
header { background-image: url(header-highres.png); }  
}  

/* low resolution screens */  
@media (-webkit-max-device-pixel-ratio: 1.5),  
         (max--moz-device-pixel-ratio: 1.5),  
         (max-resolution: 299dpi) {  
header { background-image: url(header-lowres.png); }  
}  

如果没有，请阅读此链接

---

只需再添加一些媒体查询和css缩放

//base setting, overwrite with other queries
#content { width:800px; }

@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

@media only screen and  (min-width : 400px) and (max-width :599px) {
  #content { width:800px;}
//don't need to set zoom as it is handled by the next media query

}
@media only screen and (max-width : 599px}
  body{zoom:200%} 
//don't need to set #content as it has a default value of 600 set in the first media query.
}

---

您还可以通过执行用户代理嗅探来设置初始比例，或者通过基于窗口大小的javascript添加初始比例，但是仅通过css，您可以使用缩放来放大（用户可以始终缩小）

您是否尝试过简单地完全缩小，然后让用户放大以查看您想要的内容

尝试：

---

您可以在javascript中通过获取viewport元素（通过id或名称）并通过动态检查screen.width或window.outerWidth进行设置来实现这一点

function setViewport() {
    var viewport = document.getElemementById("viewport");


    if(window.outerWidth <= 400) {
        //screen.width gives display pixel count, use window.outerWidth for physical pixel count.
        viewport.setAttribute('content', 'width=800);
    } 
}

函数setViewport（）{
var viewport=document.getElemementById（“viewport”）；
如果（window.outerWidth），这正是我不想做的。因为如果我使用“width=device width”，那么视窗宽度为300px的手机只能看到600px页面的一半。但我想要的目标是，这个设备将看到一半缩小的页面（600px宽度页面缩放到300px物理设备宽度）.好的…所以你可以通过添加初始缩放为0.5来合并meta语句，该值应该可以缩小以查看整个页面..我不能，因为我不想为所有设备设置此值，这也是我问这个问题的原因。对于屏幕较大的设备，例如800px，设置初始缩放为0.5没有任何意义。然后页面我问这个问题的原因是我想使用适合多个视口的媒体查询。嗯……所以你只想为较小的屏幕设备设置视口比例……我可以考虑使用服务器端技术，如Java/JSP（因为meta标记是全局应用于所有设备的）…基本上这涉及到检测请求来自何处（移动设备/平板电脑）…为了进行检测，您可以尝试WURFL（）。一旦获得了该信息，您可以动态地包含不同的头部部分（例如desktop.jsp/mobile.jsp/table.jsp）。每个头部部分都有不同的元视口设置，即你想知道描述的方式是广义的，但事实就是如此……同样有一个很好的教程，可以为你提供一些很好的信息。它被称为DesignMobileWeb，在App Store上提供。对于服务器端，java这只是一个例子……你也可以使用任何其他的技术……你知道吗？我正在寻找确切的方法。没关系。知道了。看看我的答案。
function setViewport() {
    var viewport = document.getElemementById("viewport");


    if(window.outerWidth <= 400) {
        //screen.width gives display pixel count, use window.outerWidth for physical pixel count.
        viewport.setAttribute('content', 'width=800);
    } 
}