欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  新闻

HTML移动端及PC端页面适配跳转

程序员文章站 2022-06-23 19:13:06
2019年8月5日 | 作者: 月光 | 分类: 编程开发 | 评论: 0 | 浏览: 132 | 阅读全文......

  网页通常需要适配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.williamlong.info/">

  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.williamlong.info'
}
}
}()
</script>