6

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

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

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

如果有人可以就此提供任何建议，那就太好了。

这是我的网站

这是css样式表

4

3 回答 3

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

}

谢谢

于 2013-12-24T12:16:34.350 回答
2

尝试使用这个

<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
于 2013-12-23T13:01:22.543 回答
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 规则更加用户友好和维护的响应式设计方法。

于 2013-12-30T01:22:58.977 回答