Responsive site works on desktop but not mobile

问题

I'm working on developing this responsive Wordpress site: http://www.allisoncassels.com/Test/ and having a problem with my media queries.

I coded the CSS for the following breakpoints:

/* 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)

On desktop, everything looks great. On my phone and tablet, some things are mobile and some things are still showing like the desktop (stuff I have display: none on is showing, div widths are off, etc.)

The only thing I can figure out is that it's related to my phone/tablet being retina display, but I don't see other sites having to factor that into their calculations...

Really baffled right now, I'll appreciate any help. Thanks

回答1:

Put this in your head!!! :P

Inside the meta tag.

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

Cheers, Mark

回答2:

You should add this meta

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

Try this media query for iPhone 6/6 Plus and Apple Watch CSS media queries

@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 portrait

@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 landscape

@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 portrait

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

and (-webkit-min-device-pixel-ratio: 3) { }

iPhone 6 and 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)
  { }

For Image responsive

img {

   max-width: 100%;
  }

回答3:

This wordpress theme Avando is already responsive:

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

you don't need to create some additional css

回答4:

Update

My web host's server was crashing while I was working last night and I think that was affecting the files being properly propagated... All the responsive code works perfectly today.

回答5:

Try adding a color css border around elements that are not displaying correctly, border:thin red solid; or change the background-color to figure out if you css selector is being used. Also, it will be usefull if you put in links to the page and point out the elements you are having issues with and the device/device browser you are testing on.

来源：https://stackoverflow.com/questions/15944131/responsive-site-works-on-desktop-but-not-mobile