Question

一个Wordpress网站（使用Genesis框架）我设计的是在iPhone和HTC上正确显示响应，但不在三星Galaxy手机上。（在三星Galaxy S2和三星Ace上测试过）我目前正在使用FitVids插件使视频嵌入响应。

奇怪的是，在三星手机上查看没有视频嵌入的页面显示正常，但在带有视频嵌入的页面上，显示的页面布局是平板电脑屏幕而不是手机屏幕。

我尝试了各种其他插件，但似乎都没有解决这个问题。

如果有人能对此提出任何建议，那就太好了。

这是我的site

这是css stylesheet

Answer 1

我发现三星屏幕是480 * 800px

请尝试使用以下CSS：

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

}

由于

Answer 2

尝试使用此

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">

Answer 3

建议不要使用@media规则，因为移动设备与桌面的像素大小可能会有所不同。

例如，而不是：

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

}

添加一个容器，其左边距为5％，边距为5％：

<body>
<div class="container">
# Your body goes here
</div>
</body>

我发现，与标准的@media规则相比，这是一种更加用户友好和维护的响应式设计方法。

网站对三星Galaxy S2没有响应

3 个答案: