我正在使用一种使用不同样式表"移动"我的桌面站点的基本方法。在我的网站的每个页面的顶部，我有这样的:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="handheld" />
当用户从智能手机登录我的网站时，它会进入首页[index.php]，上面也有上面提到的代码。主页上有8个按钮，无论用户选择哪个按钮，网站都会在他们的智能手机上正确显示移动版本。
然而，每当用户决定通过任何其他页面上的按钮返回主页时，index.php就会在他们的智能手机上以DESKTOP版本显示。换句话说，index.php第一次在智能手机上正确显示，但第二次(以及以后的每一次)都不能正确显示。
如果用户只是点击智能手机浏览器上的BACK按钮返回主页，index.php将显示适当的移动格式。
fww，每个主页按钮都涉及到我的程序查询SQL数据库并返回数据(这工作得很好)。这会以某种方式重置样式表功能吗?
如果重要的话，mymobile.css看起来像这样:
/* mobile styles */
@media handheld {
html, body {
font: 12px/15px sans-serif;
background: #fff;
padding: 3px;
color: #000;
margin: 0;
}
#sidebar, #footer {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
#content img {
max-width: 250px;
}
.center {
width: 100% !important;
text-align: center;
}
a:link, a:visited {
text-decoration: underline;
color: #0000CC;
}
a:hover, a:active {
text-decoration: underline;
color: #660066;
}
}
/* iPad [portrait + landscape] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
/* iPhone [portrait + landscape] */
@media only screen and (max-device-width: 480px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
你知道是什么原因造成的吗?
奇怪的是，它在第一次加载时就工作了!
有效的媒体类型是"全部"、"打印"、"屏幕"one_answers"语音"。在目前的实践中，"screen"通常被认为等同于"all"，而该类型只是被省略了(对于只打印和只屏幕阅读器样式的情况，保留了媒体类型规范)。
链接样式表中的媒体查询类似于<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
(从如何使用媒体查询的文章中复制)
在您的例子中，最终的标记将类似于
<link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" />
<link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="(max-width: 400px)" />
(我不知道你用什么宽度作为"手持"断点，所以我只使用400px。CSS-Tricks的媒体查询标准设备是一个很好的参考max-width移动断点…这是很少你会费心瞄准一个特定的设备，但例如，这表明你的断点在800px将捕获最流行的平板电脑)