1.Google Analytics analysis tools: the registration page after adding Google Analytics code, you can analyze what equipment than larger or visit the Web site at which pages access,
2.Modernizr can detect the browser html5 supportive elements. And so on can determine whether to support localstorage
3.html5 elements are displayed in older versions of IE browser block elements article, aside, nav, section {display: block;}
4.PC end fixed layout fluid layout, while the mobile site, we always use fluid layout, it can make your site adapt to different size devices.
For example: a display in portrait, landscape display 2 at (rational use of each pixel)
5. Clear the default style html5 elements
article,aside,section……{ margin:0; padding:0;border:0;font-size:100%;font:inherit; vertical-align:baseline;}
6. Reset page font size: -webkit-text-size-adjust: none;
-webkit-text-size-adjust: none; if access to the Pc desktop access, or through other non-mobile device's browser, will lead to a page zoom functionality will be disabled.
IPhone: html{-webkit-text-size-adjust:100%;}
Microsoft html {-ms-text-size-adjust: 100%;}
7. media queries (media query)
@media screen and (min-width:320px){ }
8. By the same LAN, you can use the XAMPP configuration of mobile development environment (local site service), make sure the computer and mobile devices are on the same wireless network. That can be accessed by IP address
9. If your main users and mobile iphone safari, on a desktop computer test can save a lot of time. Open safari, senior bar preferences --- --- --- develop user agent --- Mobile safari 3.1.3-IPhone
10. Start the web application through the interface icons
Retina screen with 114 * 114 icons
<link rel='apple-touch-icon-precomposed' sizes='114*114' href='apple-touch-icon-114*114-precomposed.png'>
ipad use the icons 72 * 72
IPhone and Android unused Retina screen above the 2.1 version of the device, use the icons 57 * 57
For Nokia Symbian devices, a shortcut icon is only used to tell the location of the mobile device icon.
<link rel='shortcut icon' href='img/1/apple-touch-icon.png'>
11. (text is too small and difficult to read), in order to allow the phone to get a better web browsing experience, the introduction of the viewport meta tag, its role is to create a virtual viewport, and the resolution of the virtual desktop monitor window close , Apple will default is 980px, (if you do not set the viewport, it will render the page to the width of 980 pixels)
<meta name ='viewport' content='width=device-width'>
12. Some old mobile browser does not recognize viewport property, these browsers, using the following code:
<Meta name = 'HandheldFriendly' content = 'true'> // PalmOS, AvantGo and BlackBerry
For Microsoft's PocketPC <meta name = 'MobileOptimized' content = '320'>
13.IOS equipment Mobile Safari is a nagging question is: when you switch from portrait mode to landscape mode, the text font on the browser suddenly becomes larger. (IOS7.2 test not the problem)
How to solve this problem then <meta name = 'viewport' content = 'width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0'
But the cause can not be scaled, bad eyes can not enlarge the text difficult to read the resulting situation, so we monitor the use of gesture events, when the default maximum zoom gesture starts on the viewport to the default value 1.6, a minimum of 0.25
// detect all meta, set its viewport property, up to 1.6, the minimum size of the original 0.25, iphone comes gesturestart event bug: Sometimes the effect can not afford the first time, second time to work correctly ios4
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>
13. The phone starts google map map, just <a href='http://maps.google.com/maps?q=cupertino'> add a map, you can set the parameters to select the origin and destination
14.iphone full screen mode is activated, the page is added to the label, and then start (via interface icons web application )
<Meta name = 'apple-mobile-web-app-capable' content = 'yes'> When the Web application is started from the interface icon to start in full-screen mode, the loaded mode hides the upper part of the browser toolbar, address bar and bottom column
<Meta name = 'apple-mobile-web-app-status-bar-style' content = 'black'> displays a status bar at the top of the browser
<Link rel = 'apple-touch-startup-image' href = 'img / 1 / splash.png'> the program starts, when loaded, a display interface preloaded, telling the user that the program is loaded
IPhone and ipad because of differences in screen size, thus requiring different sizes of pre-loading interface
var filename = navigator.platform === 'ipad' ? 'h/' : 'i/';
document.write('<link rel="apple-touch-startup-image" href="/img/'+filename +'splash.png"/>');
15. When an enlarged form appears ios focusing. How to disable the zoom function
// input box onfocus attribute viewport when maximum-scale = 1, blur loses focus maximum-scale = 10
<script>
var $viewportMeta = $('meta[name="viewport"]');
$('input,select,textarea').bind('focus blur',function(event){
$viewportMeta.attr('content','width=device-width,initial-scale=1,maximum-scale=' + (event.type=='blur'? 10:1) );
}
</script>
16. How to disable or restrict part Webkit features, such as <a> click on the link, when there will be prompted to "open the link or copy or open a new page."
Solution: .nocallout { -webkit-Touch-callout : none;}
How to display an ellipsis // ban wrap, beyond the hidden content display ellipsis white-space when overflowing content: nowrap; overflow: hidden; text-overflow: ellipsis
How to restrict copy and paste function -webkit-user-select: text
How to change the background color after clicking -webkit-tap-highlight-color: rgba (0,0,0,0);
How to make text editable contenteditable = true
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
html {color:#ff9;}
.a{ white-space: nowrap; overflow: hidden; text-overflow:ellipsis; -webkit-user-select:text;}//内容出现省略号
.nocallout {-webkit-touch-callout: none;}
#targetarea {width:200px; height:120px; padding-top:80px; background:#ccc; text-align:center; font-size:20px;}
</style>
</head>
<body>
<header >
</header>
<div id="targetarea" class="nocallout" contenteditable=true>
<a class="nocallout" href="http://www.google.com" target="_blank">Google</a>
</div>
<footer>
</footer>
</body>
</html>
17. The mobile terminal of interaction:
1) using the page elements to move the touch
2) horizontal and vertical screen switching event
3) use gestures to rotate page elements
4) use to create slide Gallery
5) use gestures to zoom page elements
// move page elements, mobile safari does not allow the event object touches and changedTouches attribute is copied to another object, we can use to solve this problem event.originalEvent
(Gray part is to make the point in dragging it on the center point of their own income test. Gray is written on the front part of the book)
<script> $('#someElm').bind('touchmove',function(event){ event.preventDefault(); var touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0]; var elm = $(this).offset(); var x = touch.pageX - elm.left/2; // var x= touch.pageX - elem.width()/2 ; var y = touch.pageY - elm.top/2; $(this).css('left', x+'px'); $(this).css('top', y+'px'); }); </script>
// horizontal and vertical screen switching events (sometimes you need to disable the automatic switching screen anyway, such as the development of the game. It is easy for native application that, but very difficult for a web application.)
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
</script>
<script>
$(window).bind('orientationchange',function(event){
updateOrientation ( event.orientation ); // horizontal screen when text changes to "LANDSCAPE" mode, when the vertical screen text becomes "PORTAIT"
})
function updateOrientation(orientation) {
$("#a").html("<p>"+orientation.toUpperCase()+"</p>");
}
</script>
// switch the screen anyway small example, the text is rotated 90 degrees in portrait, landscape under normal (vertical screen at 90 degrees in fact, want to prompt users to cross-screen operation)
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link href="http://fonts.googleapis.com/css?family=Kranky:regular" rel="stylesheet" type="text/css" >
<style>
body {
font-family: 'Kranky', serif;
font-size: 36px;
font-style: normal;
font-weight: 400;
text-shadow: none;
text-decoration: none;
text-transform: none;
letter-spacing: 0em;
word-spacing: 0em;
line-height: 1.2;
}
</style>
</head>
<body>
<div id="screen">
<div id="loader">enter the game</div>
</div>
<script>
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
window.onorientationchange = function() {
update();
}
function update() {
switch(window.orientation) {
case 0: // Portrait
case 180: // Upside-down Portrait
var cWidth = window.innerWidth;
var cHeight = window.innerHeight;
document.getElementById("screen").style.width = cHeight-36+'px';
document.getElementById("screen").style.height = cWidth+'px';
break;
case -90: // Landscape: turned 90 degrees counter-clockwise
case 90: // Landscape: turned 90 degrees clockwise
var cWidth = window.innerWidth;
var cHeight = window.innerHeight;
document.getElementById("screen").style.width = "100%";
document.getElementById("screen").style.height = "auto";
break;
}
}
update();
</script>
<script>
</script>
</body>
</html>
// use gestures to rotate the page elements (iphone5 tests do not pass) --- listening ongesturechange event, re-use css3 transform: rotate (0deg) principle
<script>
var rotation =0 ;
var node = document.getElementById('someElm');
node.ongesturechange = function(e){
var node = e.target;
//alert(e.rotation);
// scale and rotation are relative values,
// so we wait to change our variables until the gesture ends
node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
//alert("rotate(" + ((rotation + e.rotation) % 360) + "deg)");
}
node.ongestureend = function(e){
// Update the values for the next time a gesture happens
rotation = (rotation + e.rotation) % 360;
}
</script>
// use to create slide gallery, jquery mobile is mainly used in the swipeleft, swiperight event
<!doctype html> <html> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html, body { padding:0; margin:10px auto; } #checkbox { border:5px solid #ccc; width:30px; height:30px; } #wrapper { width:210px; height:100px; position:relative; overflow:hidden; margin:0 auto; } #inner { position:absolute; width:630px; } #inner div { width:200px; height:100px; margin:0 5px; background:#ccc; float:left; } .full-circle { background-color: #ccc; height: 10px; -moz-border-radius:5px; -webkit-border-radius: 5px; width: 10px; float:left; margin:5px; } .cur { background-color: #555; } #btns { width:60px; margin:0 auto; } </style> </head> <body> <header> </header> <div id="main"> <div id="wrapper"> <div id="inner"> <div></div> <div></div> <div></div> </div> </div> <div id="btns"> <div class="full-circle cur"></div> <div class="full-circle"></div> <div class="full-circle"></div> </div> </div> <footer> </footer> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> <script> var curNum = 0; $('#wrapper').swipeleft(function () { //alert('hi'); $('#inner').animate({ left: '-=210' }, 500, function() { // Animation complete. curNum +=1; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); }); }); $('#wrapper').swiperight(function () { $('#inner').animate({ left: '+=210' }, 500, function() { // Animation complete. curNum -=1; $('.full-circle').removeClass('cur'); $('.full-circle').eq(curNum).addClass('cur'); }); }); </script> </body> </html>
// use gestures picture zoom zoom gesture --- When triggered, we can get information zoom , and zoom in or out on this page element event.scale
<script> var width = 100, height = 100; var node = document.getElementById('frame'); node.ongesturechange = function (e) { var node = e.target; node.style.width = (width * e.scale) + "px"; node.style.height = (height * e.scale) + "px"; alert(node.style.width); } node.ongestureend = function (e) { width *= e.scale; height *= e.scale; } </script>
extend:
Two-finger multi-touch, trigger sequence of events is as follows :( The best example: google map, Baidu map)
1 touchstart finger 1: triggered when the finger touches the screen 2 touchstart finger 2: Fires when a finger touches the screen . 3 gesturestart: trigger when the second finger touches the screen . 4 gesturechange: starts moving when the two fingers touched and held the trigger 5 finger touchend 1: the trigger when the first finger from the screen . 6 touchEnd finger 2: trigger when the second finger away from the screen, followed gestureend trigger . 7 gestureend: triggers when the second finger away from the screen
Reproduced in: https: //www.cnblogs.com/positive/p/3958569.html