2

我正在为我的摄影爱好开发一个新网站。广告是 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*/ }
4

3 回答 3

5

在标题中添加此代码！

<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
于 2013-11-05T17:04:41.627 回答
1

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

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

到 HTML 的头部。

于 2013-11-05T17:02:50.670 回答
1

从您复制到这里的内容来看，您的媒体查询似乎不正确，这里有一些示例查询，正如在这个问题上回答的那样......

/* 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 及之前的版本不支持此功能，如此处所述

于 2013-11-05T17:14:00.940 回答