为什么我的CSS3媒体查询不适用于移动设备？ [英] Why are my CSS3 media queries not working on mobile devices?

问题描述

在styles.css中，我使用的是媒体查询，它们都使用以下变体：

  / * -  [普通CSS样式] ---------------------------------- * / 
 
 @media唯一屏幕和（最大宽度：767px）{
 
 / *  -  [手机风格转到此处] ------------------- -------- * / 
} 
  

网站调整为布局当我缩小窗口时，我想在常规浏览器（Safari，Firefox）中使用，但手机上根本没有显示移动设备布局。相反，我只是看到了默认的CSS。

任何人都可以指向正确的方向吗？

解决

 <$ c $这些都是有用的提示， c>< meta name =viewportcontent =width = device-width，initial-scale = 1> 
  

现在，Android（2.2）和iPhone都可以正常工作...

In the styles.css, I am using media queries, both of which use a variation of:

/*--[ Normal CSS styles ]----------------------------------*/

@media only screen and (max-width: 767px) {

    /*--[ Mobile styles go here]---------------------------*/
}

The sites resize to the layout I want in a regular browser (Safari, Firefox) when I shrink the window, however, the mobile layout isn't shown at all on a phone. Instead, I just see the default CSS.

Can anyone point me in the right direction?

解决方案

All three of these were helpful tips, but it looks like I needed to add a meta tag:

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

Now it seems to work in both Android (2.2) and iPhone all right...

这篇关于为什么我的CSS3媒体查询不适用于移动设备？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！