首页 > 移动平台 > 详细

学习笔记,HTML移动端及PC端页面适配跳转的方法

时间:2020-05-17 19:35:15      阅读:61      评论:0      收藏:0      [点我收藏+]

网页通常需要适配PC端和移动端,适配可以通过响应式布局判断屏幕尺寸来展示不同的效果,还可以通过编写两个页面,也就是PC端和移动端分别写一个页面,这种方式更方便功能模块的编写。   

通常情况下,PC端域名使用www,而移动端域名使用m,在编写PC和移动两个页面时,在实际页面加载时要加载到对应的页面,所以需要判断设备的类型,让搜索引擎和浏览器知道,PC端用户应该访问哪个页面,移动端用户应该访问哪个页面。

  自适应页面,在页面头部添加一行:<meta name="applicable-device" content="pc,mobile">   

PC页面,在页面头部添加一行:<meta http-equiv="mobile-agent" content="format=xhtml; url=https://m.你的网站.com/">   

        PC页面,在页面底部增加Javascript代码,将移动设备访问流量跳转到移动网站,例如: <script> !function () { var devices = ["iPhone","Android","Windows Phone"] var ua = window.navigator.userAgent for (var i = 0; i < devices.length; i++) { if (ua.indexOf(devices[i]) != -1) { window.location.href = ‘https://www.你的网站.com‘ } } }() </script>

技术分享图片

学习笔记,HTML移动端及PC端页面适配跳转的方法

原文:https://www.cnblogs.com/xiaozhi188/p/12906336.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!