响应式网站适用于桌面，但不适用于移动设备答案

【问题标题】：Responsive site works on desktop but not mobile响应式网站适用于桌面，但不适用于移动设备
【发布时间】：2013-04-03 08:57:56
【问题描述】：

我正在开发这个响应式 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 宽度关闭等）

我唯一能弄清楚的是这与我的手机/平板电脑是视网膜显示器有关，但我没有看到其他网站必须将其纳入他们的计算...

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

【问题讨论】：

标签： wordpress responsive-design wordpress-theming media-queries retina-display

【解决方案1】：

你应该添加这个元

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

试试这个媒体查询 iPhone 6/6 Plus 和 Apple Watch 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 Plus 横向

@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-min-device-pixel-ratio: 3) { }

iPhone 6 和 6 Plus

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

苹果手表

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

图像响应

img {

   max-width: 100%;
  }

【讨论】：

【解决方案2】：

把这个放在你的脑海里！！！ :P

在元标记内。

name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

干杯，标记

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

更新

我昨晚工作时，我的网络主机服务器崩溃了，我认为这影响了文件的正确传播......今天所有的响应代码都运行良好。

【讨论】：

【解决方案5】：

这个 wordpress 主题 Avando 已经响应：

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

你不需要创建一些额外的 css

【讨论】：

我确实这样做了，但我已经为许多页面完成了自定义页面类型，并在其余页面上完成了自定义布局。这些没有响应。另外，我对主题进行了大量修改。不幸的是，它附带的响应式代码很少适用。