响应网站适用于台式机，但不适用于移动电话

我正在开发此响应式Wordpress站点：http://www.allisoncassels.com/Test/，并遇到媒体查询问题。响应网站适用于台式机，但不适用于移动电话

我所编码的CSS以下断点：

/* Portrait Tablets */ 
@media only screen and (min-width: 768px) and (max-width: 959px) 

/* Portrait Mobiles */ 
@media only screen and (max-width: 767px) 

/* Landscape Mobiles */ 
@media only screen and (min-width: 480px) and (max-width: 767px)

在桌面上，一切看起来都很好。在我的手机和平板电脑上，有些东西是移动的，有些东西仍然像桌面一样显示（我显示的东西：没有显示，div宽度等）

我唯一能找出的是这与我的手机/平板电脑是视网膜显示有关，但我没有看到其他网站必须将其计算在内......

现在真的很困惑，我会很感激任何帮助。由于

来源

2013-04-11 user2269408

这个WordPress主题Avando已经响应：

http://themefurnace.com/themes/?theme=Avando

你并不需要创建一些额外的CSS

来源

2013-04-11 08:39:23 cvelinho

我这样做，不过，我已经完成了自定义页面其他许多页面和自定义布局。这些都没有响应。另外，我重新修改了主题。不幸的是，它附带的响应代码很少适用。 – user2269408 2013-04-11 19:19:14

尝试添加元素周围的彩色边框的CSS没有被正确显示，border:thin red solid;或更改background-color以确定是否正在使用css选择器。此外，如果您将链接指向页面并指出您遇到问题的元素以及您正在测试的设备/设备浏览器，这将非常有用。

来源

2013-04-11 10:43:28 Grundizer

好主意，谢谢 – user2269408 2013-04-11 19:19:33

更新

，而我的工作，昨晚，我认为这是影响的文件被正确地传播我的虚拟主机的服务器崩溃了......所有的响应代码今天完美的作品。

来源

2013-04-11 19:22:48 user2269408

把这个放在你的头上！：P

在meta标签中。

名称= “视口” 内容= “宽度=设备宽度，初始规模= 1，最大规模= 1”/>

干杯，马克

来源

2013-05-02 01:20:54 Mark

您应该添加该元

<meta name="viewport" content="width=device-width, initial-scale=1">

试用iPhone 6/6 Plus和Apple关注CSS这个媒体查询媒体查询

@media only screen and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 2) 
{ }

iPhone 6肖像

@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 2) 
{ }

iPhone 6加景观

@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: landscape) 
and (-webkit-min-device-pixel-ratio: 3) 
{ }

iPhone 6 Plus上肖像

@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (orientation: portrait)

和（-webkit分钟-装置 - p ixel比：3） {}

iPhone 6和6加

@media only screen 
    and (max-device-width: 640px), 
    only screen and (max-device-width: 667px), 
    only screen and (max-width: 480px) 
    { }

Apple关注

@media 
    (max-device-width: 42mm) 
    and (min-device-width: 38mm) 
    { }

图像响应

img { 

    max-width: 100%; 
    }

来源

2016-04-26 05:08:33

响应网站适用于台式机，但不适用于移动电话

回答

相关问题