我怎样才能让我的网站宽度完全符合iphone 5？ [英] How can I make my website width fit fully on iphone 5?

问题描述

我正在为我的摄影爱好创作一个新网站。该广告是faspix.com我已经得到它适合笔记本电脑/台式机我怎么想，但我有一个问题，使宽度适合我的iPhone当我加载在iphone上的网页高度是完全的，但只有宽度显示从左到右大约一半，然后我必须向右滚动才能看到宽度的其余部分...我尝试了一堆不同的媒体查询，但没有真正解决问题，例如，当我将site_content切换到最大宽度100它只是收缩在iPhone上的容器....可以有人帮我得到这个宽度问题固定在iPhone上？谢谢

CSS：

  media（max-device-width： 1024px）{/ * iPad的肖像和上网本，以及任何屏幕较小* / / *尽可能使设计灵活* / / *结构代码考虑所有设备下面* /} 
 
 @media（max-device-width：640px）{/ * Iphone portrait and smaller * /} 
 
 media（max-device-width：540px）{/ *更小更小... * / } 
 
媒体（最大设备宽度：320px）{/ * iPhone的肖像和更小。您可以停止在320px * /} 
  

解决方案

你在这里复制了什么，你的媒体查询似乎是不正确的，这里有一些例子，如这个问题...

  / *智能手机（纵向和横向） -   - ------ * / 
 @media仅限屏幕
和（最小设备宽度：320px）
和（最大设备宽度：480px）{
 / *风格* / 
} 
 
 / *智能手机（风景）----------- * / 
 @media仅限屏幕
和（最小宽度：321px）{
 / *样式* / 
} 
 
 / *智能手机（人像）----------- * / 
 @media仅限屏幕
和（最大宽度：320px）{
 / *样式* / 
} 
 
 / * iPad（纵向和横向） - ---------- * / 
 @media仅限屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）{
 / * St yles * / 
} 
 
 / * iPad（风景）----------- * / 
 @media仅限屏幕
和（min -device-width：768px）
和（max-device-width：1024px）
和（orientation：landscape）{
 / *样式* / 
} 
  

显然按照需求添加样式，并根据需要更改媒体查询大小！

为了将来的参考， CSS技巧有一篇好文章您可以阅读媒体查询。你需要考虑的另一件事是浏览器的兼容性，因为IE8和之前不支持这一点，正如这里

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

解决方案

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

这篇关于我怎样才能让我的网站宽度完全符合iphone 5？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！