Safari開發者iphone模式不工作？

我開始學習如何設計一個網站工作，並在iOs的Safari瀏覽器上看起來不錯。我不擁有iPhone/iPod，因此我必須測試是否在PC Safari的開發人員模式中，我將其設置爲iPhone。Safari開發者iphone模式不工作？

問題是這不是工作，我不知道我的HTML是壞的，還是瀏覽器不是我認爲的那麼好的開發工具。

我的HTML（它只是一個簡單的測試）：

<!doctype html> 
<html lang="en"> 
<head> 
    <title>iPhone css test</title> 

    <meta charset="utf-8" /> 
    <meta name="viewport" content="user-scalable=no, width=device-width" /> 

    <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /> 
    <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> 

</head> 
<body> 
<div id="test"> 
    lorem ipsum 
</div> 
</body> 
</html>

和我的兩個CSS的：

iphone.css

#test{ 
    width: 480px; 
    border: 1px solid #000000; 
}

desktop.css

#test{ 
    width: 700px; 
    margin: 0 auto; 
    border: 1px solid #ff0000; 
}

並沒有米我如何設置Safari開發人員，它顯示了700px寬，居中，紅色邊框版本的div，而不是480px寬的黑色。我錯過了什麼？元標記？或其他？

求解：如果瀏覽器寬度爲480px或小於480px，iphone.css會自動應用。它甚至不需要設置爲iPhone用戶代理。謝謝傑克勞倫斯！

來源

2011-01-12 Ákos Nikházy

你有三個問題。

你不能改變基於窗口大小（沒有一些花哨的JavaScript）的樣式表。 Safari的windows仍然會使用desktop.css文件，因爲它的潛在可以放大。
將您的Useragent更改爲Mobile Safari並沒有多大作用。 它不是設備上測試的替代品。 useragent只是一個標識字符串，所以你需要一些javascript來獲得useragent並測試它是否是iOS useragent，然後選擇適當的屏幕大小。你可能想看到http://en.wikipedia.org/wiki/User_agent。
視網膜顯示怎麼樣？

來源

2011-01-12 12:07:01

這有幫助。我將瀏覽器大小更改爲480px並應用了iphone css！所以不需要JavaScript，它足以調整瀏覽器窗口的大小。這個答案讓我找到了解決方案。謝謝。 – 2011-01-12 12:10:53

你只看到一個div的原因是因爲你的HTML標記只有一個div。

紅色邊框，700px寬和居中的原因是因爲CSS（層疊樣式表）的工作原理。這是Cascade的一部分，使用最接近底部的規則。因此，如果您將頭部鏈接的順序切換爲：

<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> 
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />

它可能會按照您的預期發生。

這或你的iPhone CSS黑客無法正常工作。

來源

2011-01-12 11:24:15 Kyle

這不可能是正確答案。因爲我們可以選擇爲任何媒體制作獨立的風格。iPhone必須使用鏈接到它的樣式表，因爲我們可以鏈接css以進行打印，用於投影儀等。而當我使用iphone時，我希望看到iphone css（在這種情況下，iphone是具有iPhone模式的Safari）因此，div在HTML中，當我在Safari中使用iphone模式時，應該有黑色邊框和480寬度。 – 2011-01-12 11:47:59

您需要將瀏覽器窗口的實際大小調整爲480px或更少，才能讓CSS中的媒體ques工作。

來源

2011-01-26 15:02:52

Safari開發者iphone模式不工作？

回答

相關問題