html5实现移动端适配完美写法


Posted in HTML / CSS onNovember 16, 2017

在pc版网页(http://pc_url) 上,添加:

<link rel="alternate" media="only screen and(max-width: 640px)" href="http://pc_url" >

在移动版网页(http://mobile_url) 上,所需的注释应为:

<link rel="canonical" href="http://mobile_url" >

之前的Meta标记(mobile agent)会继续沿用,但我们推荐使用HTMAL5语言制作的移动页面使用最新方案进行跳转适配,其它如xml语言的移动页跳转适配,需要继续使用之前的meta标记方式:

<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=mobile_url">

html5新增的移动适配写法如上,这个主要是为了百度等搜索引擎抓取到网站的移动端网址是什么,不是自动当设备切换到手机时自动跳转的.若实现自动跳转还需要js.

总结

以上所述是小编给大家介绍的html5实现移动端适配完美写法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
Css3+Js制作漂亮时钟(附源码)
Apr 24 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
css3实现多个元素依次显示效果
Dec 12 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 HTML / CSS
Amaze UI 文件选择域的示例代码
Aug 26 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 #HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 #HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 #HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 #HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 #HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 #HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 #HTML / CSS
You might like
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
Zend Framework框架之Zend_Mail实现发送Email邮件验证功能及解决标题乱码的方法
2016/03/21 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP中子类重载父类的方法【parent::方法名】
2016/05/06 PHP
innerText和textContent对比及使用介绍
2013/02/27 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
2013/10/24 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
jQuery向后台传入json格式数据的方法
2015/02/13 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
基于ajax及jQuery实现局部刷新过程解析
2020/09/12 jQuery
JavaScript编写开发动态时钟
2020/07/29 Javascript
[03:49]DOTA2英雄基础教程 光之守卫
2014/01/14 DOTA
python中os模块详解
2016/10/14 Python
在java中如何定义一个抽象属性示例详解
2017/08/18 Python
Python pandas常用函数详解
2018/02/07 Python
Python 利用内置set函数对字符串和列表进行去重的方法
2018/06/29 Python
对Python 窗体(tkinter)树状数据(Treeview)详解
2018/10/11 Python
Django 反向生成url实例详解
2019/07/30 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python opencv图片编码为h264文件的实例
2019/12/12 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
请解释在new与override的区别
2012/10/29 面试题
直接有效的自我评价
2014/01/11 职场文书
村委会主任先进事迹
2014/01/15 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
开业主持词
2014/03/21 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
演讲稿之我的初心我的成长
2019/08/12 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers