一个Wordpress网站(使用Genesis框架)我设计的是在iPhone和HTC上正确显示响应,但不在三星Galaxy手机上。 (在三星Galaxy S2和三星Ace上测试过)我目前正在使用FitVids插件使视频嵌入响应。
奇怪的是,在三星手机上查看没有视频嵌入的页面显示正常,但在带有视频嵌入的页面上,显示的页面布局是平板电脑屏幕而不是手机屏幕。
我尝试了各种其他插件,但似乎都没有解决这个问题。
如果有人能对此提出任何建议,那就太好了。
这是我的site
这是css stylesheet
答案 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规则相比,这是一种更加用户友好和维护的响应式设计方法。