根据设备调整 div 大小答案

【问题标题】：Resizing div based on device根据设备调整 div 大小
【发布时间】：2017-11-30 17:35:16
【问题描述】：

所以我无法让我的 div 根据它是否是移动（特别是智能手机）设备来调整大小。现在我使用的移动设备是iPhone7plus。所以我不确定我的尺寸是否适合这个设备。

我原来的 css（桌面版）是这样的：

div#allContent div#mainContent div#contentText {
  width:50%;
  /*other styles*/
}

因此屏幕上的文本位于页面的一半，而注册表单将位于另一半。现在，当我在 iPhone 中查看时，表单中的下拉项目太大，我看不到下拉框中的文本。所以我试图让 contentText div 的宽度为 100%，然后表单 div 也为 100%。

我将此添加到我的 css 文件的底部

我已经尝试过这第一行：

/*@media only screen and (min-device-width:320px) and (max-device-width:480px) {
@media screen and (min-device-width:320px) and (max-device-width:480px) {
  div#allContent div#mainContent div#contentText {
    width:100%;
  }
  div#allContent div#mainContent div#signupContent {
    width:100%;
  }
}

是不是因为我有一个更大的移动设备无法使用？我应该增加最大值吗？我只是在学习移动设备支持。

【问题讨论】：

如果您仍然看到宽度为 50% 的框，则说明您超出了声明的分辨率 (320-480 像素)。

标签： html css mobile width

【解决方案1】：

在 ipad 和记事本设备宽度开始后，移动设备最大宽度可以是 767。

@media screen and (min-device-width:320px) and (max-device-width:767px) {
  //code comes here
 }

【讨论】：

【解决方案2】：

我认为您的代码中的媒体查询语法不同

@media screen and (max-width: 480px){

}

我希望此媒体查询适用于 iphone 纵向模式。

【讨论】：

【解决方案3】：

也许您的问题是语法问题，或者您没有正确选择目标，如果您发布完整代码（HTML 和 CSS），我们可能会更有帮助。

无论如何，您都可以使用min-width 和max-width 而不是*-device-width。

我在CodePen 上创建了示例，看看它会对你有所帮助。

【讨论】：

我很确定它在我的语法中。我正在寻找其他解决方案，并在 jsriddle 上找到了一个有效的 sn-p。所以我要逐行检查我的代码，看看发生了什么哈哈
所以我刚刚从我的手机中清除了我的历史记录和缓存，它就可以工作了。那很奇怪。尽管我不断刷新手机上的页面并重新输入网址。猜猜我的缓存或 cookie 中有什么东西阻止它工作。