Meta Basic Knowledge:

• H5 page window automatically adjusts to device width and prohibits users from scaling pages

// I. HTML Page Structure

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

// Width sets the viewport width to a positive integer or string'device-width'				
// Heights set viewport height, generally set the width, will automatically resolve the height, you can not set			
// The default scaling ratio for initial-scale is a number with decimal numbers.					
// Mini-scale allows users to zoom in to a minimum of one digit, with decimal numbers				
// Maxim-scale allows users to zoom in to a maximum of one digit, with decimal numbers				
// Is user-scale allowed to zoom manually

//II. JS Dynamic Judgment
var phoneWidth =  parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){
    var version = parseFloat(RegExp.$1);
    if(version>2.3){
        document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
    }else{
        document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
    }
} else {
    document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}

Basic meta tags for blank pages
<! - Set zoom - >.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />

<! - Hidden address bar only for Safari of IOS. (Note: After IOS 7.0, no effect has been seen on safari)--> ___________.	
<meta name="apple-mobile-web-app-capable" content="yes" />				
<! -- Safari top status bar style for IOS only (defau lt/black/black-translucent optional) -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />			
<! - Disable number recognition as phone number in IOS / Ignore email address recognition in Android platform - >
<meta name="format-detection"content="telephone=no, email=no" />

<! - Enable 360 browser's extreme speed mode (webkit) -->
<meta name="renderer" content="webkit">							
<! - Avoid IE using compatibility mode - >
<meta http-equiv="X-UA-Compatible" content="IE=edge">					
<! - Optimizing for handheld devices, mainly for older browsers that don't recognize viewport, such as BlackBerry
<meta name="HandheldFriendly" content="true">						
<! - Microsoft's old browser - >
<meta name="MobileOptimized" content="320">						
<! - UC Forced Vertical Screen - >
<meta name="screen-orientation" content="portrait">					
<! - QQ Forced Vertical Screen - >
<meta name="x5-orientation" content="portrait">						
<! - UC Forced Full Screen - >
<meta name="full-screen" content="yes">							
<! - QQ Forced Full Screen
<meta name="x5-fullscreen" content="true">						
<! - UC Application Mode - >
<meta name="browsermode" content="application">						
<! - QQ application mode - > QQ application mode, QQ application mode, QQ application mode, QQ application mode, QQ application mode, QQ application mode, QQ application mode, QQ application mode, QQ application mode and QQ application mode.
<meta name="x5-page-mode" content="app">						
<! - Windows Phone click No highlight - >
<meta name="msapplication-tap-highlight" content="no">

Common problem:

• How to define font-family on mobile end

@ --------------------------------------English Name of Chinese Font
@ Song style      SimSun
@ Blackbody      SimHei
@ Weixin Yahei   Microsoft Yahei
@ Microsoft JhengHei Microsoft JhengHei
@ NSimSun    NSimSun
@ New Detailed Style  MingLiU
@ Detailed Style    MingLiU
@ DFKai-SB    DFKai-SB
@ Imitation song     FangSong
@ Regular script     KaiTi
@ Imitation song_GB2312  FangSong_GB2312
@ Regular script_GB2312  KaiTi_GB2312  
@
@ Note: Most Chinese fonts are in Song style, Yahei style and English style. Helvetica

body { font-family: Microsoft Yahei,SimSun,Helvetica; } 

// I. Telephone calls
<a href="tel:0755-10086">Phoning:0755-10086</a>

//  2. Sending SMS, winphone system is invalid
<a href="sms:10086">Send text messages to: 10086</a>

// 3. Writing E-mail
//Note: When adding these functions, the first function begins with "?" and the last one begins with "&".					
//1. Ordinary mail
<a href="mailto:863139978@qq.com">Click on me to send an email</a>						
//2. Add? cc = at the beginning after the receiving address, and add copy address (Android has compatibility problems)
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net">Click on me to send an email</a>		
//3. Following the copy address, write & bcc= and add the encrypted copy address (Android has compatibility problems)
<a href="mailto:863139978@qq.com?cc=zhangqian0406@yeah.net&bcc=384900096@qq.com">Click on me to send an email</a>									
//4. Contains multiple recipients, transcripts, and Bcc, separated by semicolons (;)
<a href="mailto:863139978@qq.com;384900096@qq.com">Click on me to send an email</a>			
//5. Include themes, use subject?=
<a href="mailto:863139978@qq.com?subject=Mail Subject">Click on me to send an email</a>				
//6. Include content with body=; if content contains text, use% 0A to wrap text lines 
<a href="mailto:863139978@qq.com?body=Mail Subject Content%0A Tencent Integrity%0A Looking forward to your arrival">Click on me to send an email</a>											
//7. Content contains links, and text with http(s): // etc. is automatically converted into links
<a href="mailto:863139978@qq.com?body=http://Www.baidu.com "> Click on my email</a>		
//8. Content includes pictures (PC does not support)
<a href="mailto:863139978@qq.com?body=<img src='images/1.jpg' />">Click on me to send an email</a>		
//9. Complete examples
<a href="mailto:863139978@qq.com;384900096@qq.com?cc=zhangqian0406@yeah.net&bcc=993233461@qq.com&subject=[Mail Subject]&body=Tencent invites you to participate%0A%0Ahttp://Www.baidu.com%0A%0A<img src='images/1.jpg'/>">Click on my email</a>

/* touch events triggered when the user's finger is placed on the mobile device and slides on the screen */					
// The following support webkit
touchstart-It happens when the finger touches the screen. No matter how many fingers there are at present					
touchmove-Triggered continuously when the finger slides on the screen. Usually when we slide the page again, we call it event Of preventDefault()Prevent defaults: Prevent page scrolling								
touchend-Triggered when the finger leaves the screen								
touchcancel-The system triggers when it stops tracking the touch. For example, a sudden page in the process of touching alert()A prompt box, which triggers the event, is less frequently used

//TouchEvent explains:
touches: Information on all fingers on the screen								
targetTouches: Finger information in target area									
changedTouches: Finger information that triggered the last event								
touchend At that time, touches and targetTouches The information will be deleted. changedTouches The last information saved is best used to calculate finger information.

//Parameter information (changedTouches[0])
clientX,clientY Coordinates in the display area
target: Current element

//Sequence of event response
ontouchstart  > ontouchmove  > ontouchend > onclick

// The following support winphone 8
MSPointerDown-It happens when the finger touches the screen. No matter how many fingers there are at present
MSPointerMove-Triggered continuously when the finger slides on the screen. Usually when we slide the page again, we call it css Of html{-ms-touch-action: none;}Prevent defaults: Prevent page scrolling
MSPointerUp-Triggered when the finger leaves the screen

Note: web pages on mobile devices have 300 ms delay. Playing can cause button click delay or even click failure.

The following are historical reasons, from the sharing of a colleague in a company:
In 2007, Apple released safari, the first IOS system on the iphone. In order to display the large screen pages on the PC better on the mobile phone, safari used a double tap to zoom scheme. For example, when you open a web page on the PC with a browser on the mobile phone, you may see that the content of the page can hold up the whole screen, but the font and picture are very small. If you can't see clearly, you can quickly double-click on a part of the screen, and you can see the magnified content of that part, and then double-click again to return to the original state.

Double-click zooming refers to two quick clicks on the screen with your finger. The Safari browser with iOS will zoom the page to its original scale.

The reason lies in how the browser needs to determine the quick click. When the user clicks on an element on the screen, such as jump link < a href=""> </a>, the browser will capture the click first, but the browser can not decide whether the user clicks on the link or double-clicks on the partition to zoom in. Therefore, after the first click, the browser will first Hol. If the user does not click the next time in the T-Time interval, the browser will do the click-jump link processing. If the user clicks the second time in the T-Time interval, the browser will prohibit the jump, and then the browser will scale the pages in this part of the area. So how much is the time interval t? Under IOS safari, it's about 300 milliseconds. That's where the delay comes from. As a result, the user clicks the page purely, and the page needs a period of time to respond, giving the user a sense of slow experience. For web developers, the page js captures the click event callback function processing, which takes 300 ms to take effect, which indirectly leads to the processing of other business logic.

// Solutions:
Fasstclick can solve 300 ms delay of clicking events on mobile phones
 zepto touch module, tap event is also to solve the problem of delay in click

Description: The retina screen is a liquid crystal screen with super high pixel density. The pixels displayed on the same size screen change from one to more. For example, on the same screen with the same tape, in the retina display of Apple devices, one pixel becomes four.
The bitmap in the HD display is enlarged and blurred, so the visual manuscript on the mobile side is usually designed to be twice as large as that of the traditional PC.
The front-end solution, then, is to ensure that the length and width of the cut-out pictures are even, and use backgroud-size to reduce the pictures to 1/2 of the original.

// For example, if the width and height of the picture are: 200px*200px, then the writing is as follows
.css{width:100px;height:100px;background-size:100px 100px;}
// The other elements are taken as 1/2 of the original value, such as the font of visual manuscript 40px, which is written in 20px style.
.css{font-size:20px}

// image-set Design Rentina Background Map
 Image-set, a private property of webkit, is also a property of CSS4, which is created to solve the problem of images on Rentina screen.
.css {
    background: url(images/bg.jpg) no-repeat center;
    background: -webkit-image-set(
    url(images/bg.jpg) 1x, / / / support image-set ordinary screen
    URL (images/bg-2x.jpg)2x); //entinan supporting image-set
}

/ios Users click on a link and a translucent grey mask appears., If you want to disable it, you can set it-webkit-tap-highlight-color Of alpha The value is 0 to remove the gray translucent mask.
//android users click on a link and a border or a translucent gray mask will appear. Different manufacturers define different amount of effect. The alpha value of webkit-tap-highlight-color can be set to 0 to remove the effect of some machines.
//In winphone system, the gray translucent background generated by clicking on the label can be removed by setting < meta name= "msapplication-tap-highlight" content= "no";
//Special note: Some models can not be removed, such as millet 2. There is another way for button classes to use div tags instead of a or input tags.
a,button,input,textarea { 
    -webkit-tap-highlight-color: rgba(0,0,0,0); 
    -webkit-user-modify:read-write-plaintext-only; //- One side effect of webkit-user-modify is that the input method can no longer input multiple characters.
}   
// It's fine too 
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }
//winphone
<meta name="msapplication-tap-highlight" content="no">

//1. Use appearances to change the default appearance of webkit browsers
input,select { -webkit-appearance:none; appearance: none; }

//2. Using pseudo-elements to change the default appearance of form elements under winphone
//1. Disable the select Default arrow: -ms-expand modifies the form control drop-down arrow, sets hiding and modifies it with background images
select::-ms-expand { display:none; }

//2. Disable the default styles of radio and checkbox: -ms-check modifies the default icons of form checkboxes or radio boxes, hides them and modifies them with background images.
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check { display:none; }

//3. Disable the default clearance button for the form input box on the pc side: -ms-clear modifies the clearance button, sets hiding and uses background images to modify it.
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear { display:none; }

// If you need to adapt to a variety of mobile devices, rem is recommended. The following are the reference values:
html { font-size: 62.5%; }   //10*16 = 62.5%
//Setting up the 12px font here pay attention to adding the corresponding PX value before rem, solve the compatibility problem of browsers that do not support rem, and achieve elegant degradation.
body { font-size:12px; font-size:1.2rem; }     

//Remove the scroll bar of webkit - display: none;
//Other parameters
::-webkit-scrollba //Scroll bar integral part
::-webkit-scrollbar-thumb   //Small squares in the scroll bar
::-webkit-scrollbar-track   //Rolling bar track
::-webkit-scrollbar-button  //Buttons at both ends of the scrollbar track
::-webkit-scrollbar-track-piece  //The middle part of the scroll bar, the built-in track
::-webkit-scrollbar-corner       //Edge corner, where two scrollbars intersect
::-webkit-resizer            //A small control at the intersection of two scrollbars for resizing elements by dragging

// Long-click links and picture pop-up menus are prohibited
a,img { -webkit-touch-callout: none }    

// Prohibit ios and android users from selecting Chinese characters
html,body {-webkit-user-select:none; user-select: none; }

// Change the color value of the input box placeholder
::-webkit-input-placeholder { /* WebKit browsers */
color: #999; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999; }
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999; }
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #999; }
input:focus::-webkit-input-placeholder{ color:#999; }

// android Remove Voice Input Button
input::-webkit-input-speech-button {display: none}

// Prevent default touch events on windows Phone
/*Description: The default touch event event event using e.preventDefault under winphone is invalid and can be disabled by style, such as:*/
html { -ms-touch-action:none; } //Disable winphone default touch events

• Cancel the default capitalization of the English initials when input ting under ios

• Mobile Photo and Upload Pictures

//IOS has the functions of taking pictures, videos and choosing local pictures. Some Android s only have the function of choosing local pictures. Winphone does not support
<input type="file" accept="images/*" />
<input type="file" accept="video/*" />

//JS Processing
function orientInit(){
    var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait';
    if(orientChk =='lapdscape'){
        //Here are the events that need to be executed under the horizontal screen
    }else{
        //Here are the events that need to be executed under the vertical screen
    }
}

orientInit();
window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){
    setTimeout(orientInit, 100);
},false)    

//CSS Processing
//Vertical screen style
@media all and (orientation:portrait){   }
//Horizontal screen style
@media all and (orientation:landscape){   }

//Audio, Writing 1
<audio src="music/bg.mp3" autoplay loop controls>Your browser doesn't support it yet.</audio>

//Audio, Writing II
<audio controls="controls"> 
    <source src="music/bg.ogg" type="audio/ogg"></source>
    <source src="music/bg.mp3" type="audio/mpeg"></source>
    //Preferred to play music bg.ogg, not support playing bg.mp3
</audio>

//JS Binding Play Automatically (Play Music When Operating Windows)
$(window).one('touchstart', function(){
    music.play();
})

//Compatibility Processing under Wechat
document.addEventListener("WeixinJSBridgeReady", function () {
    music.play();
}, false);

//Summary
//1. The autoplay attribute of the audio element is not available on IOS and Android, and is normal on the PC side.
//2. When the audio element does not set controls, the IOS and Android will occupy the space size, while Chrome on the PC side will not occupy any space.

// Using the device Motion of HTML5 to invoke gravity induction events
if(window.DeviceMotionEvent){
    document.addEventListener('devicemotion', deviceMotionHandler, false)
}   

var speed = 30;
var x = y = z = lastX = lastY = lastZ = 0;
function deviceMotionHandler(eventData){
    var acceleration = event.accelerationIncludingGravity;
    x = acceleration.x;
    y = acceleration.y; 
    z = acceleration.z;
    if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){
        //Here is the method to be performed after shaking. 
        yaoAfter();
    }
    lastX = x;
    lastY = y;
    lastZ = z;
}

function yaoAfter(){
    //do something
}

//Note: Say yao.js in the shaking effect of the case

//The following code can make Android pages no longer be resized by user font zooming, but there will be a delay of about 1S, during which you can consider loading to deal with.
if (typeof(WeixinJSBridge) == "undefined") {
    document.addEventListener("WeixinJSBridgeReady", function (e) {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
                alert(JSON.stringify(res));
            })
        }, 0)
    });
}else{  
    setTimeout(function(){
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){
            alert(JSON.stringify(res));
        })
    }, 0)   
}

//Under IOS, you can use - webkit-text-size-adjust to prohibit users from adjusting font sizes
body { -webkit-text-size-adjust:100%!important; }

//Best solution: Re or percentage layout is best

//fixed location
//1. Fixed elements under IOS are easy to locate errors. When a soft keyboard pops up, it will affect the location of fixed elements.
//2. Fixed performance under Android is better than iOS. When a soft keyboard pops up, it will not affect the location of fixed elements.
//3. position:fixed is not supported under iOS4
//Solution: Use [Iscroll](http://cubiq.org/iscroll-5), such as:
<div id="wrapper">
        <ul>
               <li></li>
               .....
        </ul>
</div>
<script src="iscroll.js"></script>
<script>
    var myscroll;
    function loaded(){
        myscroll=new iScroll("wrapper");
    }
    window.addEventListener("DOMContentLoaded",loaded,false);
</script>


//position positioning
//When the soft keyboard pops up under Android, it affects the absolute element location
//Solution:
var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
    $('.ipt').on('focus', function(){
        $('.css').css({'visibility':'hidden'})
    }).on('blur', function(){
        $('.css').css({'visibility':'visible'})
    })
}

<!--
1.ios7+Support automatic playback
2.Support Airplay Equipment (e.g. speakers, Apple TV)play
x-webkit-airplay="true" 
3.Playing video incomplete screen
webkit-playsinline="true" 
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>

function deviceType(){
    var ua = navigator.userAgent;
    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];    
    for(var i=0; i<len,len = agent.length; i++){
        if(ua.indexOf(agent[i])>0){         
            break;
        }
    }
}
deviceType();
window.addEventListener('resize', function(){
    deviceType();
})

function isWeixin(){
    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=='micromessenger'){
        return true;
    }else{
        return false;
    }
}

//1.@-webkit-keyframes need to start at 0% and end at 100%, and 0% can't be removed.
//2.after and before pseudo-classes cannot use animation
//3.border-radius does not support% units. To be compatible, you can set radius a larger value.
//4. Writing translate percentages together with scale can lead to failure, for example:
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

// 1. Samsung Galaxy S4's own browser does not support border-radius abbreviation
 // 2. When border-radius and background color are set at the same time, the background color will overflow beyond the corner.
// 3. Some mobile phones (such as Samsung) have a link that supports mouse: visited event, that is to say, the text becomes purple after the link is accessed.
// 4.android cannot play multi-audio audio at the same time

.css {
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}

//Currently, hardware acceleration is supported by Chrome/Filefox/Safari/IE9+, as well as the latest version of Opera, which automatically opens when certain CSS rules are applied to a DOM element, thus resolving page whitening and ensuring smooth animation.
.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

// 1. Prohibit the use of iframe (blocking the parent document onload event)
// 2. Do not use gif pictures to achieve loading effect (reduce CPU consumption, improve rendering performance)
// Use CSS3 code instead of JS animation;
// Open GPU acceleration;
// Use base64-bit encoding for pictures (large pictures are not recommended for large ones)
    // For some small icons, base64-bit encoding can be used to reduce network requests. However, it is not recommended to use large maps, which consumes CPU. The advantages of small icons are:
    // 1. Reduce HTTP requests;
    // 2. Avoid cross-domain files;
    // 3. The amendment shall take effect in time;