时间戳

首页 > 解决方案 > 响应式网页可以存在两种不同的 html 代码吗？

html - 响应式网页可以存在两种不同的 html 代码吗？

问题描述

这不是一个问题，因为它有助于集思广益。至少在这个问题上，一个想法是否有效。现在我知道 CSS 成像有助于页面在遇到平板电脑大小的屏幕或 iPhone 大小的屏幕时重塑。我的问题是，当像素大小达到一定水平时，有没有办法让两种完全不同的设计工作？

标签： htmlresponsive-design

解决方案

您可以在 CSS 中使用类似于以下内容的方式执行此操作：

@media (min-width:500px) { … }

然而，这种方法也有其固有的问题。如果用户将手机侧向旋转，他们会收到不同版本的页面吗？如果用户只是降低了他们的分辨率（或者只是有一台旧显示器），他们会不会被其他版本卡住？

从我如何阅读您的问题来看，您似乎只是想检测某人何时在打电话，并为他们提供该网站的移动版本？如果是这种情况，那么使用 JavaScript 有更好的选择：

function mobileMode(){
var x= navigator.userAgent;
if (x.indexOf('Mobile')>=0){
    //Do mobile stuff here
}
else{
    //Or do desktop stuff here if need be
}

每个浏览器都会发送所谓的用户代理，使用它，您可以通过检查用户代理中的“移动”一词来检测某人是否在移动设备上。

这样做的另一个好处是，它允许某人在电话上请求该站点的桌面版本。

一旦您检测到查看页面的设备类型，您甚至可以为移动用户执行一些操作，例如将链接更改为完全不同的 CSS 文件！

推荐阅读