项目初始化——HTML模板

我们在项目初始化的时候,都会有一个html的模板,里面会做各种兼容和声明等工作。PC端如果需要适配IE8需要加入很多垫片,而且还要做好双核浏览器的优先选择配置等;M端更是需要做到不同分辨率屏幕的适配,另外还有300ms延迟问题。这里送上笔者在项目当中整理的两个模板,已经经过了一定项目的考验,供大家参考。

另外,本文中涉及的M端适配并非rem,而是修改viewport的显示比例,这个方案相较rem来说起码有2个优点:一是省字符,二是不用计算,设计稿是多少就是多少。不过在实践当中,UC浏览器貌似不认user-scalabe=0,还是会被双击放大,不过笔者认为还是可以接受的。如果还遇到了其他bug,请反馈,谢谢。

PC模板




    
    
    
    Document

    



M模板




    
    
    Document
    
    


    
    

公共部分说明

1、
在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。HTML5 不基于 SGML,所以不需要引用 DTD。
请始终向 HTML 文档添加 声明,这样浏览器才能获知文档类型。它不是 HTML 标签,是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令;必须是 HTML 文档的第一行,位于 标签之前,没有结束标签,对大小写不敏感;
参考文献: http://www.w3school.com.cn/tags/tag_doctype.asp 

2、
HTML 的 lang 属性可用于网页或部分网页的语言。这对搜索引擎和浏览器是有帮助的。根据 W3C 推荐标准,您应该通过 标签中的 lang 属性对每张页面中的主要语言进行声明。
参考文献: http://www.w3school.com.cn/tags/html_ref_language_codes.asp

3、
当你的 html 文件是以 UTF-8 编码保存的,而且里面有中文,你试试加与不加在 Chrome 的效果你就知道有没有区别了

4、

告诉浏览器是否识别特定格式的文本。根据项目需求修改值。


PC部分说明

1、
控制IE渲染内核的选择。chrome=1针对装了chrome frame插件的IE浏览器起作用,以防万一写上。
参考文献: https://msdn.microsoft.com/en-us/library/ff955275(v=vs.85).aspx

2、
控制双核浏览器渲染引擎,content的取值为webkit、ie-comp、ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
参考文献: http://se.360.cn/v6/help/meta.html

3、

你可能感兴趣的:(前端工程化)