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

Posted 2023-03-06

【中文标题】如何在支持 CSS3 的网站上支持更多的移动视口宽度并强制移动浏览器使用正确的宽度？

【英文标题】：How do I support more mobile viewport widths on CSS3-enabled website and force mobile browser to use the proper width?

【发布时间】：2012-01-31 00:14:58

【问题描述】：

我有一个固定宽度为 1000 像素的网站。我想支持这个页面的 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) 上测试我的网页时，它使用 1000 像素的视口宽度，因此它以全宽显示网站。但如果它选择 800 像素的视口宽度会更好，因为网页会针对具有较小显示器的设备显示更优化。

我知道我可以使用例如：<meta name="viewport" content="width=800px" /> 设置视口宽度，或者使用：<meta name="viewport" content="width=device-width" /> 设置对应于设备物理宽度的宽度，但这些都不起作用。因为它要么会强制所有移动设备在第一种情况下始终使用 800px 视口，要么会在第二种情况下使用设备上像素的物理宽度，但这也行不通，因为在纵向模式下（大多数人如何在移动设备上冲浪） web 和使用电话），这将是 300 像素或最多 400 像素，这太小了，用户将不得不水平滚动很多。

所以实际上我的问题是——我可以支持并可能强制移动浏览器根据它们的实际屏幕尺寸使用不同的视口宽度吗？我不知道我是否解释得足够清楚，所以我将举例说明我想要实现的目标：

对于物理宽度为 400 像素的移动设备（具有更大显示屏的现代设备），我想强制视口宽度为 800 像素，并且可能比例为 0.5，因此第一页访问将完全显示，无需水平滚动并带有用户选项放大到页面的某些部分。

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

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

提前感谢您的帮助。

【问题讨论】：

你有没有想过这个问题？我正在寻找做确切的事情。

没关系。弄清楚了。看我的回答。

【参考方案1】：

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

我会推荐使用

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

根据 devoce 宽度设置视口..

现在，即使您说，它不适用于方向更改，但在 iPhone/iPad 上，无论方向如何，设备宽度始终为 768px。

至少在这些设备上，设置为设备宽度就可以了..

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

您能否尝试像上面那样设置元标记，看看它是否正常工作。如果没有，我可以建议其他方式..

谢谢。

【讨论】：

这正是我不想做的。因为如果我使用“width=device-width”，那么视口宽度为 300px 的手机只会看到 600px 页面的一半。但我想要的目标是这个设备会看到一半缩小的页面（600px 宽度的页面缩放到 300px 物理设备宽度）。

好的...所以您可以通过将初始缩放添加为 0.5 来组合元语句，这应该缩小以便能够看到整个页面..

我不能，因为我不想为所有设备都设置这个，这也是我问这个问题的原因。设置 initial-zoom 0.5 对于屏幕较大的设备没有任何意义，例如800像素。然后页面会变得非常小。我问这个问题的原因是我想使用适合多个视口的媒体查询。

嗯...所以您只想为较小的屏幕设备设置视口比例...我认为的替代方法是使用 Java/JSP 等服务器端技术（因为元标记是否则全局应用于所有设备）。基本上这将涉及检测请求来自哪里（手机/平板电脑）...对于检测，您可以尝试 WURFL (wurfl.sourceforge.net)。获得该信息后，您可以动态地包含不同的 head 部分（例如 desktop.jsp/mobile.jsp/tablet.jsp）。每个头部部分都有不同的元视口设置，即你想要的方式

我知道描述的范围很广，但事实就是这样......有一个很好的教程可以提供给你一些很好的信息......它是称为 DesignMobileWeb，可在 App Store 上使用。.对于服务器端，java 只是一个示例...您也可以使用任何其他技术..

【参考方案2】：

这里有一些可以帮助你的 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);   
  

如果没有阅读此链接

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

【参考方案3】：

只需添加更多媒体查询和 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
  bodyzoom:200% 
//don't need to set #content as it has a default value of 600 set in the first media query.

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

【参考方案4】：

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

试试：

<meta name="viewport" content="width=device-width,minimum-scale=0.25,height=device-height,user-scalable=yes" />

【参考方案5】：

您可以在 javascript 中通过获取视口元素（通过 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);