響應式設計不適用於Android？

我正在測試Nexus 4 - 4.1.1 - 768x1280和Xperia Z - 4.2.2 - 1080x1920 ...在這兩種情況下，我的網站（在臺式機上都有響應）在Android手機中僅部分響應。 WP8的工作正常（令人驚訝） - 和iPhone 5的作品 - 除了高度是應該多一點（粘腳沒有出現）。就好像CSS認爲有一個額外的100px左右 - 當它們不應該是時，事情就會被略微切斷。一個例子媒體查詢：響應式設計不適用於Android？

/* if device is less than 768px */ 
@media (max-width: 768px) { 
    .container{ 
     width: auto; 
     max-width: calc(100% ~"-" 20px); 
     margin-left: 10px; 
    } 
    .banner-info{ 
     padding-right: 15px; 
     width: auto; 
     max-width: 300px; 
     font-size: 13px !important; 
    } 

}

在我的頭：

<meta content="True" name="HandheldFriendly"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

這是怎麼回事嗎？

來源

2014-01-21 SB2055

如果你嘗試什麼'@media屏幕（最大寬度：768px）{...}'代替？ –

@beworker正在嘗試.. – SB2055

@beworker - 沒有工作......我也用逗號替換了分號，它沒有工作。沒有錯誤，只是大小不正確。 – SB2055

的Adroid電話例如Nexus或銀河系列具有「視網膜desplay」悲風像素比爲2，所以你必須添加此（-webkit分鐘設備像素比：2）

所以

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio : 2)

來源

2014-01-25 20:18:51

這個工具應該有助於找到每個設備的exqct查詢http://pieroxy.net/blog/pages/css-media-queries/test-features.html –

我剛剛嘗試過 - 我的桌面上的響應停止工作，所以這是不沒有選擇。除非你說我需要重複查詢，一個用於桌面，另一個用於android？我希望不是... – SB2055

我真的犯了一個錯誤，你必須用像素比例檢查像素數除以手機的最大寬度和像素比率的確切數量[鏈接] pieroxy.net/blog/pages/css-media-查詢/測試功能.html [鏈接] –

嘗試增加target-densityDpi=device-dpi您meta viewport。這是一個Android具體的價值。

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">

UPDATE：

我最近發現target-densityDpi不再支持。我解決了類似的問題，通過結合-webkit-min-device-pixel-ratio與max-width，同時也沒有在我meta viewport使用target-densityDpi：

@media all and (max-width:360px), 
      screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), 
      screen and (-webkit-min-device-pixel-ratio: 2.0) and (max-width: 720px) { 
     // CSS HERE 
    }

來源

2014-01-28 07:29:14

我用這個代碼在頭

<meta name="viewport" 
content="target-densitydpi=device-dpi,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

它爲我工作

來源

2014-02-01 16:09:05

I不打算投票，但禁用縮放不應該是你的樣板或複製/粘貼工具箱的一部分。你應該只是在你絕對確定**時故意**禁用縮放** **你的用戶永遠不會**想要縮放。（我說「想要」b/c與你認爲用戶需要的「非常不同」）。 –

http://caniuse.com/#feat=calc

您正在使用的Android版本不支持calc，你必須提供一個後備。我建議是這樣的：

width: 90%; /* fallback */ 
width: calc(100% - 20px);

但現在你的基於像素的利潤率不會導致中心的佈局。在這一點上，我建議你就忘了「鈣」完全和使用普通的「醇CSS：

width: 90%; 
margin: 0 auto;

來源

2014-02-01 18:39:59

我不知道爲什麼這是被投票的，你絕對正確的是，在Android 4.4/KitKat使用股票瀏覽器和web視圖之前，calc不起作用。 –

響應式設計不適用於Android？

回答

相關問題