Question

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

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

由于没有代码，只是在黑暗中拍摄。添加

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

到HTML的头部。

Answer 3

根据您复制到此处的内容判断，您的媒体查询似乎不正确，以下是this问题解答的一些示例问题...

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

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

为了将来参考，CSS Tricks有一篇很好的文章供您阅读媒体查询。您需要考虑的另一件事是浏览器兼容性，因为IE8及之前不支持此功能，如here所述

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

3 个答案: