移動CSS恢復為智能手機上網站的桌面版本

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第一次在智能手機上正確顯示，但第二次（以及以后的每次）顯示不正確。

如果用戶只是單擊智能手機瀏覽器上的“返回”按鈕返回首頁，則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

奇怪的是，它在第一次加載時就起作用了！

有效的媒體類型為“所有”，“打印”，“屏幕”和“語音”。 在當前的實踐中，“屏幕”通常被認為等同於“所有”，並且類型被簡單地忽略了（對於僅打印和僅屏幕閱讀器的樣式，保留了介質類型規范）。

鏈接的樣式表中的媒體查詢看起來像

<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處的斷點將捕獲最受歡迎的平板電腦）

移動CSS恢復為智能手機上網站的桌面版本

問題描述

1 個解決方案

解決方案1
0 2016-09-01 21:17:05

移動CSS恢復為智能手機上網站的桌面版本

問題描述

1 個解決方案

解決方案1 0 2016-09-01 21:17:05

解決方案1
0 2016-09-01 21:17:05