网站对三星Galaxy S2没有响应

时间:2013-07-08 01:09:03

标签: wordpress responsive-design samsung-mobile

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

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

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

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

这是我的site

这是css stylesheet

3 个答案:

答案 0 :(得分:3)

我发现三星屏幕是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) {

}

由于

答案 1 :(得分:2)

尝试使用此

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

答案 2 :(得分:1)

建议不要使用@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规则相比,这是一种更加用户友好和维护的响应式设计方法。