3

我正在尝试将我的网页优化为 720*1200 移动设备： 我的页面

它适用于 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" />

谢谢你的帮助！

4

3 回答 3

2

推荐：

  • 在媒体查询中使用min-width和。max-width
  • 避免使用min-device-widthand 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更容易使用。使用所有 4 个可能会导致在某些情况下不会应用媒体查询，因为这两组值并不总是匹配。min-device-widthmax-device-width

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

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

波士顿环球报是自适应内容响应式设计的最佳范例，几乎完全适用于min-width和max-width.

于 2012-07-15T05:08:59.593 回答
0

试试这些：

width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
于 2012-07-10T13:47:36.870 回答
0

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

于 2012-07-24T10:51:57.953 回答