css - 移动设备风格

Question

我正在努力让我的一些网站更适合移动设备。所以我创建了一个新的样式表来重新组织页面，使其更加垂直。当我在 Firefox 的响应式设计 View 中对其进行测试时，一切看起来都不错。但是当我在手机上尝试时它不起作用，只是正常显示难以阅读的网站。我包括这样的样式表:

<link type="text/css" rel="stylesheet" media="screen and (min-width: 600px)"
      href="/static/themes/pauline/style.css"/>
<link type="text/css" rel="stylesheet" media="handheld, screen and (max-width: 599px)"
      href="/static/themes/pauline/handheld.css"/>

如果我想让它在 iPhone 等设备上运行，我的媒体查询是否有问题？

Answer 1

将以下代码添加到您的 html 页面中。

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

它将以其自身屏幕的宽度呈现该页面。