html手机pc不同页面,PC端和手机端如何同时生成静态页

静态页是和图片类似的静态资源，访问静态资源不会经过程序处理，不会根据浏览器返回不同页面。要同时支持PC端和手机端浏览器，且要生成静态页时，最好使用bootstrap之类的技术，实现自适应页面设计。

如果PC端和手机端使用了不同模板，且还需生成静态页面，需要解决两个问题。

第一，PC端和手机端生成的静态页面必须保存在不同的目录，否则PC端的静态页会覆盖手机端的静态页。比如PC端和手机端的首页都是/index.html，最终必然只会保存一个文件。必须是PC端的首页为/index.html，手机端的首页为/m/index.html。其它的页面也类似，如PC端的新闻栏目页为/news/index.html，手机端的则为/m/news/index.html。

这就需要另外创建一个手机端的HTML发布点，保存路径为/m，显示路径也为/m。

然后在站点管理里设置手机端HTML发布点为之前新建的HTML手机发布点。

第二，由于PC端的页面和手机端的页面地址不同，用户访问的时候默认是访问PC端的页面。由于访问的是静态页，不经过服务器的程序处理，无法在服务器端判断是什么浏览器访问。此时需要在PC端的页面里面加上js代码，判断是否为手机端浏览器访问，如果是，则使用js跳转到手机端的静态页。

以下代码放到PC端模板首页里，如果手机浏览器访问了PC端首页，会自动跳转到手机端的页面地址。

[#if site.url != site.urlMobile]

//生成静态HTML时，需要使用js判断是否为手机端访问，并跳转到手机端地址

var ua = navigator.userAgent;var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),isAndroid = ua.match(/(Android)\s+([\d.]+)/),isMobile = isIphone || isAndroid;

if(isMobile) location.href = "${site.urlMobile}";

[/#if]

html手机pc不同页面,PC端和手机端如何同时生成静态页相关推荐

html自动跳转手机端,用JavaScript实现网站自动跳转电脑PC端与手机端不同页面
前天,有一个网友希望在其微擎系统跳转的时候实现鉴别用户不同的客户端,比如电脑PC端和手机端,实现不同的页面跳转.对于之前老蒋有给其设置过PC端网站然后检测手机访问的时候跳转到WAP网站的案例,对于这个 ...
【工具】PC端调试手机端 Html 页面的工具
一.概述有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...
[html] 制作一个页面时，需要兼容PC端和手机端，你是要分别做两个页面还是只做一个页面自适应？为什么？说说你的理由
[html] 制作一个页面时,需要兼容PC端和手机端,你是要分别做两个页面还是只做一个页面自适应?为什么?说说你的理由两个页面 pc端布局和交互行为跟移动端不一样, 两个页面反而更好维护个人简介 ...
跳出弹窗页面禁止滚动（PC端和手机端）
跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...
php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...
1. 代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现P ...
PC端和手机端字体显示不一致的解决办法
主要解决PC端和手机端字体显示不一致的的问题: 主要是在head标签里面添加几个meta页面添加的meta标签如下 <meta http-equiv="Content-Type&qu ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
天地劫pc版不显示服务器,天地劫幽城再临pc怎么全屏 PC端和手机端是否互通
在玩家用天地劫pc端游玩游戏时,有些玩家可能无法全屏,下面就为各位玩家介绍天地劫幽城再临pc怎么全屏以及天地劫PC端和手机端是否互通. 一.全屏方法在玩家进入游戏后,如果只从设置中寻找全屏的话是无法 ...
JavaScript 代码判断：PC端和手机端
js代码· 示下: <script> if ((navigator.userAgent.match(/(phone|pad|pod|iPad|iPod|iPhone|ios|Android ...

html手机pc不同页面,PC端和手机端如何同时生成静态页

html手机pc不同页面,PC端和手机端如何同时生成静态页相关推荐

最新文章

热门文章