网站无法在iPhone上正确显示

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和桌面。

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

<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) {

哪个将针对各种设备