Question

我正在制作我的第一个网站的问题。我正在制作一个响应式网站，正在我的iphone 6和其他iphone（4/5 / 5c）上进行测试。但我婆婆的三星Galaxy S2似乎没有正确显示网站。对我来说，看起来它正在显示它的桌面版本而不是我要求它做的@media查询。

这是在我的页面标题中：

<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/test /

我不是只想针对三星，我想在所有手机上只制作一个@media规则。我可能最终会为平板电脑制作一个，但是我想首先整理手机。一切都围绕手机的100％宽度属性。

我也尝试了很多不同的元标记，但没有注意到我使用了哪些遗憾。

我环顾四周找不到任何帮助，非常感谢！

[编辑1]

如果您愿意，可以前往http://www.soscharcoalseafood.com.au/test/css/stylesheet.css查看整个CSS。移动设备的@media是最低端的。对于桌面重新定位，有一个宽度为1000px的东西，所以忽略它。

[编辑2] 我婆婆的S2截图 http://imgur.com/weZUQQG

Answer 1

原因是三星设备在纵向和横向模式下都具有不同的分辨率，Apple在其设备中保持相同的分辨率。

尝试使用galaxy s2的媒体查询：

＆＃13;

@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) {

}

＆＃13;

Answer 2

嗯，您可能想看看Mobilizer http://mobile1st.com，它可以让您测试最流行的设备（实际设备，而不是模拟器），包括：

Google Nexus 7 HTC One M8 iPhone 5C iPhone 5S iPhone 6 iPhone 6 Plus iPod touch iPad Air 小型平板电脑 Kindle Fire HDX 7 联想A850 LG G2 三星Galaxy S5 三星Galaxy S6 Edge 三星Galaxy Tab Pro 8.4

目前没有S2，但可能值得在那里快速渲染以了解它是如何整体渲染的。

响应式网站适用于iPhone，但不适用于Galaxy S2

2 个答案: