How can I make my website width fit fully on iphone 5?

问题

I am working on a new site for my photography hobby. the ad is faspix.com i have got it to fit onto laptop/desktops how i would like but i am having an issue with making the width fit onto my iphone when i load the page on iphone the height is there fully but the width only shows about half from left to right then i have to scroll right to see the rest of the width...I have tried a bunch of different media queries but nothing has really solved the issue for example when i switched the site_content to max width 100 it just shrunk the container on the iphone....can someone help me get this width issue fixed on the iphone? Thanks

CSS:

media (max-device-width: 1024px) { /*IPad portrait AND netbooks, AND anything with smaller screen*/ /*make the design flexible if possible */ /*Structure your code thinking about all devices that go below*/ } 

@media (max-device-width: 640px) { /*Iphone portrait and smaller*/ } 

media (max-device-width: 540px) { /*Smaller and smaller...*/ } 

media (max-device-width: 320px) { /*IPhone portrait and smaller. You can probably stop on 320px*/ }

回答1:

Judging from what you have copied onto here, your media queries seem to be incorrect, here are some example queires, as answered on this question...

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
  /* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
  /* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  /* Styles */
}

Obviously add the styles as per requirements, and change media query sizes as needed!

For future reference, CSS Tricks has a good article for you to read up on Media Queries. Another thing you need to consider will be browser compatibility, as IE8 and before doesn't support this, as stated here

回答2:

Add this code inside the header!

<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">

回答3:

Since there is no Code, just a shot in the dark. Add

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

to the head of your HTML.

来源：https://stackoverflow.com/questions/19794483/how-can-i-make-my-website-width-fit-fully-on-iphone-5

标签

html

css

iphone

width