Question

我最近试图让我的网站与移动设备兼容，遗憾的是它比我希望的更复杂。

我最终使用了以下方法：

.mobile_device_480px {
    display: none;
}
/* if mobile device max width 480px */
@media only screen and (max-device-width: 480px) {
   .mobile_device_480px{display: block;}
   .desktop {display: none;}
}

然后将所有需要以特殊方式显示的部分包含在mobile_device_480px div中的手机以及桌面div中的所有其他内容中。这适用于我的Android手机，运行其本机浏览器。但是，在我的iPhone上运行safari时，它会同时显示mobile_device_480px和desktop。

举一个例子，在移动设备上，我想要以下文本区域的大小

<textarea rows="3" cols="77" wrap="soft"> <\textarea>

在桌面上我想要一个更大的文本区域

<textarea rows="15" cols="100" wrap="soft"> <\textarea>

这在我的电脑和我的Android手机上显示正确，但在我的iPhone上显示两个区域，所以看起来它只是忽略了显示：无;

我真的迷路了，并试图解决这个问题几个小时，并且真的不知道从哪里开始，如果它是代码，操作系统，浏览器等问题。

编辑：这两部手机的尺寸大致相同。

非常感谢任何和所有帮助。

Answer 1

我建议你替换

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

与

@media (max-width: 480px) {

将针对各种设备

网站无法在iPhone上正确显示

1 个答案: