优化 CSS 720*1280 移动设备

Posted 2023-03-06

【中文标题】优化 CSS 720*1280 移动设备

【英文标题】：optimizing CSS 720*1280 mobile devices

【发布时间】：2012-07-09 23:07:27

【问题描述】：

我正在尝试针对 720*1200 移动设备优化我的网页： My page

它在 320*480 和 480*800 设备上完美运行，但不适用于 720*1200。 页面加载放大， 就像布局视口是 720*1030 但视觉视口是 360*515。

我已经设置了视口标签，但是没有任何效果。

<meta name="viewport" content="width=device-width,user-scalable=false" />
<title>teeg bejelentkezes</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width:720px)" href="css/style-720.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:719px) and (max-width:719px) and (min-device-width:480px) and (min-width:480px)" href="css/style.css" /> 
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:479px) and (max-width:479px)" href="css/style-320.css" />  

感谢您的帮助！

【参考方案1】：

试试这些：

width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0

【讨论】：

锁定用户的缩放选项大多是个坏主意。

【参考方案2】：

推荐：

在媒体查询中使用min-width 和max-width。 避免使用min-device-width 和max-device-width。

视口元标记：

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

如果需要，请添加 minimum-scale、maximum-scale 或 user-scalable。

媒体查询：

<link rel="stylesheet" type="text/css"
      media="only screen and (min-width:720px)"
      href="css/style-720.css" />

<link rel="stylesheet" type="text/css"
      media="only screen and (min-width:480px) and (max-width:719px)"
      href="css/style.css" /> 

<link rel="stylesheet" type="text/css"
      media="only screen and (max-width:479px)"
      href="css/style-320.css" />  

说明：

min-width 和 max-width 比 min-device-width 和 max-device-width 更容易使用。使用所有 4 个可能会导致在某些情况下不会应用媒体查询，因为这两组值并不总是匹配。

在 ios 设备上，min-device-width 和 max-device-width 作用于横向模式下的宽度，与方向无关，而 min-width 和 max-width 作用于当前方向的宽度。

此外，在 android 设备上，min-device-width 和 max-device-width 对应于物理像素，而min-width 和 max-width 对应于 dips（与设备无关的像素），这使得在具有各种不同设备的设备上工作更容易像素密度。

The Boston Globe，自适应内容响应式设计的最佳示例，几乎完全适用于 min-width 和 max-width。

【参考方案3】：

感谢您的回答，我尝试了 Matt Coughlin 的建议，但 AVD (720*1280) 包含 480px css 而不是 720。最后，我改变了方法，并将设计更改为响应式。 RWD 和Examples