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)

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

我唯一可以理解的是，它与我的手机/平板电脑是视网膜显示有关，但我没有看到其他网站必须将其纳入计算...

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

Answer 1

把它放在你的头上!!! ：P

在元标记内。

name =“viewport”content =“width = device-width，initial-scale = 1，maximum-scale = 1”/＆gt;

干杯，标记

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

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

Apple Watch

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

对于图像响应

img {

   max-width: 100%;
  }

Answer 3

这个wordpress主题Avando已经响应：

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

您不需要创建一些额外的CSS

Answer 4

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

Answer 5

更新

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

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

5 个答案: