響應網站適用於iPhone，但不適用於Galaxy S2

我遇到了我正在製作的第一個網站的問題。我正在製作一個響應式網站，該網站正在使用我已測試過的桌面以及我的iphone 6和其他iPhone（4/5/5c）。但我婆婆的三星Galaxy S2似乎沒有正確顯示該網站。對我來說，它看起來像顯示它的桌面版本，而不是執行我要求它做的@media查詢。響應網站適用於iPhone，但不適用於Galaxy S2

這是我的網頁的標題：

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

而且這是在我的CSS文件：

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

，這是網站： www.soscharcoalseafood.com.au/測試/

我沒有努力的目標只是三星，我想使它在所有手機只是一個@media規則。我可能最終會爲平板電腦製作一個，但是我想先清理手機。一切都圍繞手機100％寬度屬性。

我也嘗試了許多不同的meta標籤，但沒有注意哪些我已經使用了很抱歉。

我環顧四周，找不到太多所以任何幫助是極大的讚賞！

[編輯1]

如果你願意，你可以去http://www.soscharcoalseafood.com.au/test/css/stylesheet.css和查找整個CSS。手機@media正處於底層。有一個寬度爲1000px的桌面重新定位的東西，所以忽略它。

[編輯2] 我的母親在法律的S2截圖 http://imgur.com/weZUQQG

來源

2015-08-17 weedrummerman

如果您正在定位所有手機，爲什麼不使用'@media（max-width：640px）{}' – odedta

如果您不擔心頁腳和頁眉內容的位置，請更改#body的寬度並將其設置爲100％它會工作。但根據該決議進行媒體查詢。 –

試過'@media（max-width：640px）'，仍然沒有工作。 #body已經有寬度：100％。 – weedrummerman

的原因是三星設備在縱向和橫向模式的不同分辨率和蘋果一直在自己的設備相同的分辨率。

試試這個媒體查詢銀河S2：

@media only screen 
 
and (min-device-width : 480px) 
 
and (max-device-width : 800px) 
 
and (orientation : landscape) { 
 

 
} 
 

 
@media only screen 
 
and (min-device-width : 480px) 
 
and (max-device-width : 800px) 
 
and (orientation : portrait) { 
 

 
}

來源

2015-08-17 07:06:56 WisdmLabs

以及這是不是他正在尋找..因爲我已經知道如何使用媒體查詢..請與更好的解決方案..對 –

對不起，已經嘗試.. – weedrummerman

好吧。將嘗試其他方法... – WisdmLabs

嗯，你可能想看看動員http://mobile1st.com它可以讓你在最流行的設備測試（實際設備，不是模擬器）包括這些：

Google Nexus 7 HTC One M8 iPhone 5c iPhone 5s iPhone 6 iPhone 6加 iPod touch的產品iPad Air iPad的迷你的Kindle Fire HDX 7 聯想A850 LG G2 三星Galaxy S5 三星Galaxy S6邊緣三星Galaxy Tab Pro的8.4

沒有S2在這一刻，但可能值得在那裏快速渲染，看看它是如何呈現整體。

來源

2015-08-20 00:53:16 Dan

謝謝！ A850沒有工作..即時通訊認爲這可能是一個Android的問題！ – weedrummerman

您可以看到我們正在查看的這個頁面，該頁面現已呈現在頂級移動設備上，包括A850： https://app.mobile1st.com/mobilizer/#/view/ODYD – Dan

響應網站適用於iPhone，但不適用於Galaxy S2

回答

相關問題