移动端h5开发基础

移动端h5开发基础知识

一.手机端开发页面必须要加一段代码：

    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

     注：这段代码的主要意思是：让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放。用于检测视口，主要的效果就是取消下面的滚动条，让页面适应屏幕。

二.为自己的页面设置最大宽度和最小宽度 ：

     {

         max-width:640px;

         min-width:320px;

     }

     主要作用是在屏幕足够大的时候，页面也不会失真。

三.兼容手机屏幕大小不同的情况：

      window.οnlοad=window.οnresize=function(){

             document.documentElement.style.fontSize = document.documentElement.clientWidth*40/640+'px';

      };

      在写移动端页面的时候要加上这一段代码，这段代码意思是：让视口或者说页面的可见宽度与根元素的字符大小产生对应关系，例如上面这段代码意思是在视口宽度为640px的时候，让根元素的字符大        小为40px（也就是1rem等于40px），这样在视口不断变化的时候，根元素的字符大小也会不断变化，而且有固定的系数（1/16），这样就产生了对应关系，也就是兼容了不同屏幕大小不一样的情况。

具体用法：引用上述js代码，在设计图640px的情况下测量距离，然后在把距离除以40，并把px为rem，这样就可以了，注：js里的40和640可以根据需要灵活更改，但要注意字符默认情况下最小为12px且widow.onload在只能出现一次。

                        

四.去掉 a，input 在移动端浏览器中的默认样式

    1.禁止 a 标签背景

        在移动端使用 a标签做按钮的时候，点按会出现一个“暗色”的背景，去掉该背景的方法如下：

        a,button,input,optgroup,select,textarea {

           -webkit-tap-highlight-color:rgba(0,0,0,0); 

         }

    2.禁止长按 a，img 标签长按出现菜单栏

        使用 a标签的时候，移动端长按会出现一个 菜单栏，这个时候禁止呼出菜单栏的方法如下

        a, img {

           -webkit-touch-callout: none; 

         }

    3.流畅滚动

        body{

         -webkit-overflow-scrolling:touch;

        }