2个用于移动和网页设计的html模板答案

【问题标题】：2 html templates for mobile and web design2个用于移动和网页设计的html模板
【发布时间】：2016-05-14 10:57:50
【问题描述】：

对不起，如果这个问题很愚蠢，但我想知道如何自己解决。我打算创建一个响应不同屏幕尺寸的网站。为了实现这一点，我想我会创建一个 2 个 HTML 文件，一个用于网络，另一个用于移动设备。大屏幕的设计不同于小屏幕的设计。我的问题是如何检测应用程序站点是在桌面上打开还是在手机上打开，以便区分我应该呈现什么 html 模板？任何帮助将非常感激。

【问题讨论】：

stackoverflow.com/questions/3514784/…的可能重复

标签： html css responsive-design

【解决方案1】：

我真的建议使用 CSS 响应式框架，例如 bootstrap，而不是使用 2 个单独的文件，由于必须更改两次代码，因此维护这将花费大量时间。

但是，如果您仍然想走这条路，您可以使用 javascript 来检测浏览器的宽度，根据结果，您有 2 个选项

重定向到像 m.domain.com 这样的子域
将页面的html内容替换为你想要的模板

第一个选项

if (document.body.clientWidth > 767) {
     window.location = "http://m.yourdomain.com";
}

第二个选项

if (document.body.clientWidth > 767) {
     $('body').html(your template content here);
}

【讨论】：

【解决方案2】：

“响应式”网页设计是指根据屏幕大小使用 css（或有时是 javascript）更改的单一布局。

与其创建 2 个 html 布局，不如坚持使用 1 个并使用 css 来辅助。

查看此解释以获得更多详细信息：http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

【讨论】：