Question

我为朋友建了一个网页，它在电脑上看起来很棒，但是当在设备上观看时，事情重叠并且看起来很糟糕。我为移动设备构建了一个更简单，更响应的版本。从移动设备访问网站时，如何编写移动版本代码？我在我的页面中使用了html和css，而将filezilla作为ftp客户端。感谢您的帮助，我已在网上对此进行了研究，但我发现了各种各样的答案，而且从未直接回答过。也许我没有正确地提出这个问题？

Answer 1

您应该使用媒体查询来定义要使用的CSS。例如：

<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />
<link rel="stylesheet" media="(max-width: 1800px)" href="computer.css" />

Answer 2

假设您想从桌面网站自动重定向到移动网站，如果从移动设备访问它，最简单的方法是使用Javascript

<script type="text/javascript">
if (screen.width <= 768) {
document.location = "YOUR-MOBILE-SITE.com";
}
</script>

通过检查浏览器页面宽度来工作，如果它低于768px（通常移动用户宽度小于它），它将重定向到您的移动网站。

或者，如果您只更改站点上的CSS（没有激进的html更改），而不是进行此类重定向，则可以使用编码样式表而不是重定向，因此它将在移动站点上加载移动优化的css文件： / p>

<!-- Desktop CSS File -->
<link rel="stylesheet" href="screen.css" media="screen"/> 
<!-- Mobile CSS File -->
<link rel="stylesheet" href="handheld.css" media="handheld"/>

如何将移动网站链接到我的电脑版网站

2 个答案: