Question

我正在使用一种使用不同样式表“动员”我的桌面网站的基本方法。在我网站的每个页面的顶部，我都有：

<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]，该主页上面还有上述代码。主页上有八个按钮，无论用户选择哪个，网站都会在智能手机上正确显示移动版本。

但是，每当用户决定通过任何其他页面上的按钮返回主页时，index.php就会在智能手机的DESKTOP版本中显示。换句话说，index.php第一次在智能手机上正确显示，而不是第二次（以及随后的每一次）显示。

如果用户只是按智能手机浏览器上的BACK按钮返回主页，index.php会显示正确的移动格式。

FWIW，每个主页按钮都涉及我的程序查询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; }
}

知道可能导致这种情况的原因是什么？

Answer 1

奇怪的是它适用于第一次加载！

valid media types是“全部”，“打印”，“屏幕”和“演讲”。在目前的实践中，“屏幕”通常被认为等同于“所有”，并且类型被简单地省略（对于仅打印和仅屏幕阅读器样式的情况，保留媒体类型规范）。

链接样式表中的媒体查询看起来像

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

（已从此write-up of how to use media queries复制）

在您的情况下，最终标记将类似于

<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'Media Queries for Standard Devices是max-width移动断点的一个很好的参考...您很少会针对特定设备进行定位，但例如，这会向您显示800px的断点将捕获最受欢迎的平板电脑）

移动设备css在智能手机

1 个答案: