HTML5是下一代HTML标准。HTML5受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等国外主流浏览器的支持；国内的傲游浏览器（Maxthon），360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等同样具备支持HTML5的能力。优势：开发技术简单，研发周期短，用户接触成本低一、H5的优势是兼容性好，用H5的技术开发出来的应...

　　meta对于移动端的一些特殊属性，可根据需要自行设置移动端H5项目越来越多，设计师对于UI的要求也越来越高，比如1px的边框。在高清屏下，移动端的1px会很粗。那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR（devicePixelRatio）设备像素比，它是默认缩放为100%的情况下，设备像素和CSS像素的比值。目前主流的屏幕DPR=2（iPhone8），...

　　通常移动端的布局方式1、rem布局，通过动态设置根目录下的font-size达到元素大小“自适应”，通常和百分比布局一起使用2、固定像素设固定视口宽度。3、最费事的mediaquery，根据设备视口宽度不同设置不同的样式，换句话说一个页面有多套样式。可以说是正宗的响应式布局。常规的做法带来的苦恼常规的这些做法总有一些缺陷是令人遗憾的：1、rem和百分比布局，这种布局rem终归也是有极限的，当...

　　1.JS的根据不同屏幕宽度动态设置html的font-size，使用rem布局。a.手淘方案flexible+rem（参考引入flexible.js，不需要在html结构中加入viewport标签。flexible.js会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3；同时会给html加上对应的font-...

　　调用系统功能使用能快速调用移动设备的三大通讯功能，使用能快速调用移动设备的的。这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被忽略。忽略自动识别有些会自动将数字字母符号识别为并将其渲染成上述调用系统功能里的。虽然很方便却有可能违背需求。弹出数字键盘使用弹起数字键盘会带上和，适合输入电话。推荐使用弹起数字键盘，适合输入验证码等纯数字格式。唤醒原生应用通过与原生应用建立通讯渠道...

　　方法一：引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩布局方案：淘宝的其实也和viewport的有点像，但是它主要是根据设备设备像素比设置scale的值，保持视口device-width始终等于设备物理像素，屏幕大小动态计算根字体大小，具体是将屏幕划分为10等分。这块也可以直接用js实现，后面会提到具体引入和使用方法，移步github查看，非常详细。方法二：viewport的使用githu...

　　1、为什么需要H5适配布局？1）为了适应各种移动端设备/手机，显示相应的布局效果2）可以适应各个移动端设备，并且在各种分辨率下等比例缩放以及网页可以铺满整个屏幕2、H5相关性概念知识屏幕尺寸1）指屏幕的对角线的长度，单位是英寸。2）1英寸=2.54厘米。屏幕分辨率1）在横纵向上的像素点数，单位是px，1px=1个像素点（这里的1像素指的是物理设备的1个像素点）2）例如一个手机的分辨率是13...

　　在开发移动端h5应用时，尤其是在开发混合app时，一般情况下，顶部导航会一直固定在页面头部，如下图：h5的常规操作是直接来个fixed定位，代码如下：但是，这种写法，在ios系统下，会出现一些，类似下拉页面时，导航会一起滚动，无法固定在屏幕顶部，或者是有input标签的时候，调出软键盘之后，页面无法往上顶，导致标签被挡住，尤其是在414屏，效果更严重为解决这些兼容性问题，建议使用如下两种布局：...

　　在Pc的时代，前端技术无疑统治了大多数用户的交互界面！而在移动为王的今天，NA开发在早期占领了大多数用户的交互界面，后来逐渐的前端H5开发找到了自己的技术优势，慢慢的后来居上。前端H5的优势有：轻松的热更新，（无需等待用户漫长的更新时间）codeonce，runanyway，（极大缩短产品的开发时间）丰富的社区、成熟的技术栈和人才储备与此同时也面临了许多难题，比如：性能问题（在低端机型上不...

　　常用的meta属性设置meta对于移动端的一些特殊属性，可根据需要自行设置电话号码识别在iOSSafari（其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：7位数字，形如：1234567带括号及加号的数字，形如：（+86）123456789双连接线的数字，形如：00-00-0011111位数字，形如：13800138000关闭识别开启识别...