响应型网站可在桌面上运行，但不能在移动设备上运行

Question

我正在开发这个响应性强的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)

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

我唯一能弄明白的是，这与我的手机/平板电脑是视网膜显示器有关，但我看不到其他网站必须将这一点纳入他们的计算中。。。

现在真的很困惑，我会感谢你的帮助。谢谢

Answer 1

此wordpress主题Avando已经响应：

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

你不需要创建额外的css

Answer 2

你应该添加这个元数据

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

iphone6plus人像

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

和（-webkit-min-设备-像素-比率： 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%;
  }

Answer 3

把这个放在你的脑袋里！！！：P

元标签里面。

name=“viewport”content=“宽度=设备宽度，初始比例=1，最大比例=1”/

干杯，马克