Question

拥有以下网站。似乎在使用多种浏览器的Linux和Windows上运行良好。也适用于我的机器人手机和平板电脑。但是，我不能为我的生活弄清楚为什么它不能正常地在IOS设备上工作。有人可以给我一些指示，说明如何使这样的网站更友好。我的大多数朋友和家人都使用ios。 LOL ...

http://www.GinaAndTamer.com

请在您的电脑上查看该网站，然后在iOS产品上查看。无论我试图改变什么，似乎没有帮助使它与iOS产品更兼容。我真的不想创建一个全新的网站，但有人可以指出我如何根据设备自动重定向到移动网站？

我发现了一些其他信息，并将使用另一种解决方案。

一些额外的信息，我发现我可以使用类似于以下内容的方式制作特定于设备的css文件：

<link  rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)">

@media only screen and (max-device-width: 480px) {    
    /* Put your iPhone 3g styles in here */ 
}

此外，如果我将使用重定向到一个全新的网站，我可以使用以下JavaScript代码：

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "YOUR-MOBILE-SITE.com";
}
//-->
</script>
The approach using user agent looks like this:
`code`
<script type="text/javascript">
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://YOUR-MOBILE-SITE.com");
}
-->
</script>

谢谢，驯

Answer 1

不幸的是我无法评论，所以这可能不是一个答案，但问题不是电话，它与你的CSS有关。你有固定的大小，所以它会影响设备呈现它的方式。尝试使用百分比（％）作为div宽度和高度的值，然后将其添加到头标记

<meta name="viewport" content="width=device-width, initial-scale=1">

使html css网站在ios设备上正常运行

1 个答案: