Question

我正在尝试将我的网页优化为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" />

感谢您的帮助！

Answer 1

<强>建议：

在媒体查询中使用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。

Answer 2

试试这些：

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

Answer 3

感谢您的回答，我已经尝试了Matt Coughlin的建议，但是AVD（720 * 1280）包括480px css而不是720.最后我改变了我的方法，我将设计改为响应。 RWD 和Examples

优化CSS 720 * 1280移动设备

3 个答案: