Mobile-page FAQ _ii

Control display area Various properties:

<meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name= "viewport" >

Width of the Width-viewport

• The height of the Height–viewport
• Initial-scale-Initial zoom ratio
• Minimum-scale-Minimum scale to allow the user to zoom
• maximum-scale– allows the user to zoom to the maximum scale
• user-scalable– whether the user can manually scale

Safari in iOS allows full screen browsing:

<meta content= "yes" name= "apple-mobile-web-app-capable" >

Safari Top status bar style in iOS:

<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style" >

Ignore turning numbers into phone numbers:

<meta content= "Telephone=no" name= "Format-detection" >

In general, iOS and Android will default to a certain length of number as the phone number, even if not added will default to display as the phone, so, cancel this is necessary!

The Safari settings in iOS are saved to the desktop icon:

This is the unique meta of safari in iOS, which is used when you save a page to the desktop as a desktop icon, so, size and consistent on iphone, is 57*57px

<link rel= "Apple-touch-icon" href= "Custom_icon.png" >

// 手势事件touchstart            //当手指接触屏幕时触发touchmove           //当已经接触屏幕的手指开始移动后触发touchend             //当手指离开屏幕时触发touchcancel// 触摸事件gesturestart          //当两个手指接触屏幕时触发gesturechange      //当两个手指接触屏幕后开始移动时触发gestureend// 屏幕旋转事件   onorientationchange     // 检测触摸屏幕的手指何时改变方向       orientationchange       // touch事件支持的相关属性touches         targetTouches       changedTouches              clientX　　　　// X coordinate of touch relative to the viewport (excludes scroll offset)       clientY　　　　// Y coordinate of touch relative to the viewport (excludes scroll offset)       screenX　　　 // Relative to the screen        screenY 　　  // Relative to the screen       pageX　　 　　// Relative to the full page (includes scrolling)     pageY　　　　 // Relative to the full page (includes scrolling)     target　　　　 // Node the touch event originated from      identifier　　   // An identifying number, unique to each touch event

4. Screen Rotation event: Onorientationchange
Add a screen rotation event to listen to the screen rotation status (left, right, or not) at any time. Example:

// 判断屏幕是否旋转functionorientationChange() {     switch(window.orientation) {     　　case0:              alert("肖像模式 0,screen-width: "+ screen.width + "; screen-height:"+ screen.height);             break;     　　case-90:              alert("左旋 -90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);             break;     　　case90:                alert("右旋 90,screen-width: "+ screen.width + "; screen-height:"+ screen.height);             break;     　　case180:            　　alert("风景模式 180,screen-width: "+ screen.width + "; screen-height:"+ screen.height);         　　break;     };<br>};// 添加事件监听 addEventListener(‘load‘, function(){     orientationChange();     window.onorientationchange = orientationChange; });

5. Hide the Address bar & when handling events, prevent the scroll bar from appearing:

// 隐藏地址栏  & 处理事件的时候 ，防止滚动条出现addEventListener(‘load‘, function(){         setTimeout(function(){ window.scrollTo(0, 1); }, 100); });

/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/ */*/*/*/*

/*! Normalized address bar hiding for IOS & Android (c) @scottjehl MIT License */
(function (Win) {
var doc = win.document;

If there ' s a hash, or addeventlistener is undefined, stop here
if (!win.navigator.standalone &&!location.hash && win.addeventlistener) {

Scroll to 1
Win.scrollto (0, 1);
var scrolltop = 1,
Getscrolltop = function () {
return Win.pageyoffset | | Doc.compatmode = = = "Css1compat" && Doc.documentElement.scrollTop | | Doc.body.scrollTop | | 0;
},

Reset to 0 on Bodyready, if needed
Bodycheck = setinterval (function () {
if (doc.body) {
Clearinterval (Bodycheck);
ScrollTop = Getscrolltop ();
Win.scrollto (0, scrolltop = = = 1? 0:1);
}
}, 15);

Win.addeventlistener ("Load", function () {
SetTimeout (function () {
At load, if the user hasn ' t scrolled more than ...
if (Getscrolltop () < 20) {
Reset to hide addr bar at onload
Win.scrollto (0, scrolltop = = = 1? 0:1);
}
}, 0);
}, False);
}
}) (this);

/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/*/ */*/*/*/*

6. Two-hand finger swipe event:

// 双手指滑动事件addEventListener(‘load‘,　　function(){ window.onmousewheel = twoFingerScroll;},      false// 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段)); functiontwoFingerScroll(ev) {     vardelta =ev.wheelDelta/120;              //对 delta 值进行判断(比如正负) ，而后执行相应操作     return true; };

7. Determine if it is an iphone:

// 判断是否为 iPhone ： functionisAppleMobile() {     return(navigator.platform.indexOf(‘iPad‘) != -1); };

8. Localstorage:
Example: (Note data name N to enclose in quotation marks)

var v = localStorage.getItem(‘n‘) ? localStorage.getItem(‘n‘) : "";   // 如果名称是  n 的数据存在 ，则将其读出 ，赋予变量  v  。 localStorage.setItem(‘n‘, v);                                           // 写入名称为 n、值为  v  的数据 localStorage.removeItem(‘n‘);                                           // 删除名称为  n  的数据

9. Use special Links:
If you turn off auto-recognition and want some phone numbers to link to your iPhone's dialing capabilities, you can use this to declare a phone link,

<ahref="tel:12345654321">打电话给我</a><a href="sms:12345654321">发短信</a>或用于单元格：<tdonclick="location.href=‘tel:122‘">

10. Automatic capitalization and auto-correction
To turn these two features off, you can use the Autocapitalize and AutoCorrect options:

<inputtype="text" autocapitalize="off" autocorrect="off"/>

Hide the top right button in the page

Public number when necessary (if you do not need to share a page), you can hide the top right button in the page via JavaScript code.

Interface Call Code (JAVASCRIPT)

Document.addeventlistener (' Weixinjsbridgeready ', function Onbridgeready () {weixinjsbridge.call (' HideOptionMenu ');});

Return description

Hide bottom navigation bar no return value. (Need to show please change Hideoptionmenu to Showoptionmenu)

Hide the navigation bar in the bottom of the page

The public number can be used to hide the navigation bar at the bottom of the Web page through JavaScript code, if it is deemed necessary for the user to not use the browser forward and backward function on the page.

Interface Call Code (JAVASCRIPT)

Document.addeventlistener (' Weixinjsbridgeready ', function Onbridgeready () {weixinjsbridge.call (' HideToolbar ');});

Return description

Hide bottom navigation bar no return value. (need to show top navigation bar, please change Hidetoolbar to ShowToolbar)

Web page get user network status

To make it easier for developers to provide different quality services based on the user's network status, the public number can use JavaScript code calls in Web pages within the public number to obtain network status.

Interface Call Code (JAVASCRIPT)

Weixinjsbridge.invoke (' Getnetworktype ', {},function (e) {    WeixinJSBridge.log (e.err_msg);    });

Mobile-page FAQ _ii