如何使我的网站宽度完全适合 iphone 5？

Question

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

Answer 1

将此代码添加到标题中！

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

Answer 2

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.

Answer 3

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