響應網站適用於臺式機，但不適用於移動電話

我正在開發此響應式Wordpress站點：http://www.allisoncassels.com/Test/，並遇到媒體查詢問題。響應網站適用於臺式機，但不適用於移動電話

我所編碼的CSS以下斷點：

/* Portrait Tablets */ 
@media only screen and (min-width: 768px) and (max-width: 959px) 

/* Portrait Mobiles */ 
@media only screen and (max-width: 767px) 

/* Landscape Mobiles */ 
@media only screen and (min-width: 480px) and (max-width: 767px)

在桌面上，一切看起來都很好。在我的手機和平板電腦上，有些東西是移動的，有些東西仍然像桌面一樣顯示（我顯示的東西：沒有顯示，div寬度等）

我唯一能找出的是這與我的手機/平板電腦是視網膜顯示有關，但我沒有看到其他網站必須將其計算在內......

現在真的很困惑，我會很感激任何幫助。由於

來源

2013-04-11 user2269408

這個WordPress主題Avando已經響應：

http://themefurnace.com/themes/?theme=Avando

你並不需要創建一些額外的CSS

來源

2013-04-11 08:39:23 cvelinho

我這樣做，不過，我已經完成了自定義頁面其他許多頁面和自定義佈局。這些都沒有響應。另外，我重新修改了主題。不幸的是，它附帶的響應代碼很少適用。 – user2269408 2013-04-11 19:19:14

嘗試添加元素周圍的彩色邊框的CSS沒有被正確顯示，border:thin red solid;或更改background-color以確定是否正在使用css選擇器。此外，如果您將鏈接指向頁面並指出您遇到問題的元素以及您正在測試的設備/設備瀏覽器，這將非常有用。

來源

2013-04-11 10:43:28 Grundizer

好主意，謝謝 – user2269408 2013-04-11 19:19:33

更新

，而我的工作，昨晚，我認爲這是影響的文件被正確地傳播我的虛擬主機的服務器崩潰了......所有的響應代碼今天完美的作品。

來源

2013-04-11 19:22:48 user2269408

把這個放在你的頭上！：P

在meta標籤中。

名稱= 「視口」內容= 「寬度=設備寬度，初始規模= 1，最大規模= 1」/>

乾杯，馬克

來源

2013-05-02 01:20:54 Mark

您應該添加該元

<meta name="viewport" content="width=device-width, initial-scale=1">

試用iPhone 6/6 Plus和Apple關注CSS這個媒體查詢媒體查詢

@media only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 2) 
{ }

iPhone 6肖像

@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 2) 
{ }

iPhone 6加景觀

@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 3) 
{ }

iPhone 6 Plus上肖像

@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: portrait)

和（-webkit分鐘-裝置 - p ixel比：3） {}

iPhone 6和6加

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px) 
    { }

Apple關注

@media 
    (max-device-width: 42mm) 
    and (min-device-width: 38mm) 
    { }

圖像響應

img { 

    max-width: 100%; 
    }

來源

2016-04-26 05:08:33

響應網站適用於臺式機，但不適用於移動電話

回答

相關問題