initial-scale = 1.0 + width= device-width not fitting the whole screen on any mobile

问题

So I'm pretty stumped right now. I'm building a responsive website using the theme Delicate. It comes in built with the meta tag

Which I was under the impression would set the entirety of the content on the screen width. On my phone I have to zoom out to have the content displayed somewhat nicely. I've tried changing the initial-scale value to 0.65 which made the site look nice on my personal phone which I am using to develop but it doesn't work well on the iphone 6 or other devices.

I've been bashing my face against the wall so any advice would be extremely appreciated

回答1:

The problem is the main container which has a fixed width, instead of adaptive width based on screen. My guess is that the theme is crap!

Here's a fix:

*,
*:before,
*:after {
  margin: 0pt; 
  padding: 0pt;
  box-sizing: border-box;
}

.content-pad {
  width: 100%;
}

To be more specific, you'd have to apply this rule only to small devices like so:

/* Apply this width only to small devices */

@media only screen and (min-width: 320px) {
  .content-pad {
    width: 100%;
  }
}

Make sure you either change the theme' default width or append !important on the width because of css specificity.

回答2:

initial-scale=1 seems to break more than it fixes. I just use:

<meta name='viewport' content='width=device-width'>

Which gives me the hoped-for matching to width. Desktop browsers are fine, Android on Chrome is now perfect in both orientations, as is Silk on a Kindle. Haven't tested on IOS (which is the new IE6, IMHO), but I'll be hacking in a specific fix for that if I need to.

来源：https://stackoverflow.com/questions/30527671/initial-scale-1-0-width-device-width-not-fitting-the-whole-screen-on-any-mo