H5 project FAQs and precautions

Basic knowledge of Meta:

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

//1. HTML page structure

// width Set the viewport width as a positive integer, or a string 'device-width'

// height Set the viewport height. Generally, if the width is set, the height will be automatically parsed. You don't need to set it.

// initial-scale The default scaling ratio is a number, which can include decimals

// minimum-scale Allows the user’s minimum zoom ratio, which is a number that can include decimals

// maximum-scale Allows the user’s maximum zoom ratio, which is a number that can include decimals

// user-scalable Whether manual scaling is allowed

//2. 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('');

}else{

do Cument. write('');

}

} else {

 document.write('');

}

Blank page basic meta tag

Other meta tags

FAQ:

How to define font-family on mobile terminal

@ -----------------------------------------The English name of the Chinese font

@ 宋体 SimSun

@ Heidi

@ Standard regular script DFKai-SB

@ FangSong

@ 楷体 KaiTi

@ FangSong_GB2312 FangSong_GB2312

@ 楷体_GB2312 KaiTi_GB2312

@

@ Note: Most Chinese fonts use Song and Yahei, and English uses Helvetica

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

How to make phone calls, send text messages and write emails

// 1. Call

Call: 0755-10086

// 2. Send text message, winphone system is invalid

Send text message to: 10086

​

// 3. Write an email

//Note: When adding these functions, the first function starts with "?", and the following ones start with "&"

//1. Ordinary mail

Click me to send an email

//2. Add ?cc= after the receiving address, you can add a carbon copy address (Android has compatibility issues)

Click me to send an email

//3. After the carbon copy address, write &bcc=, you can add a blind copy Send address (Android has compatibility issues)

Click me to send an email

//4. Contain multiple recipients, CC, and BCC, and use semicolons (;) to separate multiple email recipients Address

Click me to send an email

//5. To include the subject, use ?subject=

Click to send me an email

//6. To include content, use ?body=; if the content contains text, use %0A Wrap the text

Click me to send an email

//7. The content contains links, and text containing http(s)://, etc. is automatically converted into links

Click me to send an email

// 8. The content contains pictures (not supported by PC)

Click me to send an email

//9. Complete example

Click me to send an email

Mobile touch event (differentiate between webkit and winphone )

/* The touch event that will be triggered when the user puts his finger on the mobile device and slides it on the screen */

// The following supports webkit

touchstart - occurs when the finger touches the screen. No matter how many fingers are currently

touchmove - triggered continuously when fingers slide on the screen. Usually when we slide the page, we will call event's preventDefault() to prevent the default situation from happening: prevent the page from scrolling

touchend - triggered when the finger leaves the screen

touchcancel - triggered when the system stops tracking touches. For example, if a prompt box suddenly alerts () on the page during the touch process, the event will be triggered. This event is relatively rarely used

//TouchEvent description:

touches: information about all fingers on the screen

targetTouches: fingers Finger information in the target area

changedTouches: When the last finger information that triggered the event

touchend, the touches and targetTouches information will be deleted. The last information saved by changedTouches is best used to calculate finger information

//Parameter information (changedTouches[0])

clientX, clientY coordinates in the display area

target: current element

//Event response sequence

ontouchstart > ontouchmove > ontouchend > onclick

// The following supports winphone 8

MSPointerDown - occurs when a finger touches the screen. No matter how many fingers are currently

MSPointerMove - triggered continuously when fingers slide on the screen. Usually when we slide the page, we will call the CSS html{-ms-touch-action: none;} to prevent the default situation from happening: prevent the page from scrolling

MSPointerUp - triggered when the finger leaves the screen

mobile click The screen produces a delayed response of 200-300ms

Note: The web page on the mobile device has a delay of 300ms. Playing with it will cause button click delays or even click failures.

The following is a historical reason, shared by a colleague in a company:

In 2007, Apple released Safari, the first IOS system on the iPhone, in order to better display web pages suitable for large screens on PCs. On the mobile phone, a double tap to zoom solution is used. For example, if you use a browser to open a web page on a PC on your mobile phone, you may see that although the content of the page can fill the entire screen, the fonts, pictures, etc. They are too small to see clearly. At this time, you can quickly double-click a certain part of the screen, and you can see the enlarged content of that part clearly. Double-click again to return to the original state.

Double-click to zoom means to quickly click twice on the screen with your finger. The Safari browser that comes with iOS will zoom the web page to the original ratio.

The reason lies in how the browser needs to judge quick clicks. When the user clicks an element on the screen, such as a jump link, the browser will capture the click first, but the browser cannot decide Whether the user simply clicks on the link or double-clicks the area for zoom operation, so after capturing the first click, the browser will hold it for a period of time t. If the user does not click the next time within the t time interval, the browser will The browser will process the click to jump link. If the user clicks for the second time within t time, the browser will prohibit the jump and instead perform the zoom operation on this part of the page. So how long is this time interval t? Under iOS safari, it's about 300 milliseconds. This is where the delay comes from. The consequence is that if the user simply clicks on the page, the page will take a while to respond, giving the user a slow experience. For web developers, the callback function processing of the click event captured by the page js will take 300ms to take effect, which is indirect Causes the processing of other business logic to be affected.

//Solution:

fastclick can solve the 300ms delay of click events on mobile phones

zepto’s touch module, tap event is also to solve the click delay problem

Rentina display principle and design solution

Explanation: Retina screen is an LCD screen with ultra-high pixel density. The number of pixels displayed on a screen of the same size changes from one to multiple. For example, on a screen of the same size, the retina display screen of Apple devices , one pixel becomes four.

The bitmap in a high-definition display is enlarged and the picture becomes blurry, so the mobile mockup is usually designed to be twice as large as that of a traditional PC.

Then, the front-end solution is: ensure that the length and width of the image cut out of the design draft are even numbers, and use backgroud-size to reduce the image to 1/2 of the original

//For example, the image width and height are: 200px* 200px, then the writing method is as follows

.css{width:100px;height:100px;background-size:100px 100px;}

//The value of other elements is 1/2 of the original, such as the font of 40px in the visual draft, use The style is written as 20px

.css{font-size:20px}

//image-set design Rentina background image

image-set, webkit private properties, also properties of CSS4, to solve the problem under the Rentina screen Born from images.

.css {

 background: url(images/bg.jpg) no-repeat center;

 background: -webkit-image-set(

 url(images/bg.jpg) 1x, //Support image- set normal screen

url(images/bg-2x.jpg) 2x); //Support image-set Rentinan

}

How to remove the background or border when clicking on an element

/ios users click a link, it will A translucent gray mask appears. If you want to disable it, you can set the alpha value of -webkit-tap-highlight-color to 0 to remove the gray translucent mask;

//When the android user clicks a link, a border or Translucent gray mask, different manufacturers define different effects. You can set the alpha value of -webkit-tap-highlight-color to 0 to remove some of the effects that come with the machine;

//winphone system, generated by clicking on the label The gray translucent background can be removed by setting ;

//Special note: Some models cannot be removed, such as Xiaomi 2. There is another way for the button class. Instead of using a or input tags, use div tags directly

a,button,input,textarea {

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

  -webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify has a side effect, that is, the input method can no longer input multiple characters

} 

// It’s also possible

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

//Under winphone

Beautify form elements

//1. Use appearance to change webkit browsing The default appearance of the device

input,select { -webkit-appearance:none; appearance: none; }

//2. Under winphone, use pseudo elements to change the default appearance of form elements

//1. Disable select default Arrow, ::-ms-expand modify the form control drop-down arrow, set it to hide and use the background image to decorate it

select::-ms-expand { display:none; }

//2. Disable radio and checkbox by default Style, ::-ms-check to modify the form check box or radio button default icon, set it to hide and use a background image to modify

input[type=radio]::-ms-check,

input[type=checkbox ]::-ms-check { display:none; }

//3. Disable the default clear button of the form input box on the PC side, ::-ms-clear modify the clear button, set it to hide and use the background image to modify it

input[type=text]::-ms-clear,

input[type=tel]::-ms-clear,

input[type=number]::-ms-clear { display:none; }

Select px or rem as the mobile font unit font-size

// If you need to adapt to a variety of mobile devices, it is recommended to use rem. The following are reference values:

html { font-size: 62.5%; } //10*16 = 62.5%

//Set 12px font Here, please add the corresponding px value before rem to solve the compatibility problem of browsers that do not support rem and achieve graceful downgrade

body { font-size:12px; font-size:1.2rem ; } 

Super practical CSS style

//Remove webkit scroll bar——display: none;

//Other parameters

::-webkit-scrollba //The entire part of the scroll bar

::- webkit-scrollbar-thumb //The small square inside the scroll bar

::-webkit-scrollbar-track //Scroll bar track

::-webkit-scrollbar-button //Buttons at both ends of the scroll bar track

:: -webkit-scrollbar-track-piece //The middle part of the scroll bar, built-in track

::-webkit-scrollbar-corner //The corner, the intersection of two scroll bars

::-webkit-resizer //Two A small control at the intersection of scroll bars for resizing elements by dragging

// Disable long-press links and image pop-up menus

a,img { -webkit-touch-callout: none }

// Prohibit ios and android users from selecting text

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; }

// Remove the voice input button on android

input::-webkit-input-speech-button {display: none}

/ / Prevent the default touch event of Windows Phone

/*Note: Using e.preventDefault for the default touch event of Windows Phone is invalid and can be disabled through styles, such as: */

html { -ms-touch-action:none ; } //Disable the default touch event of winphone

Cancel input under iOS, the default capitalization of English initials when input

Photo taking and uploading pictures with mobile phone

//IOS has photo taking, video recording, and local selection Picture function, some Androids only have the function of selecting local pictures. Winphone does not support the rotating event and style of the screen

// js processing

Function Orientinit () {

varianTChk = document.documenteason.clientWidth> Height? 'Landscape ': Portrait';

if (Orientchk == 'Lapdscape') {

// This is event that needs to be executed under the horizontal screen}} else {

// This is an event that needs to be executed under the vertical screen

}

}

orientInit();

window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){

setTimeout(orientInit, 100);

}, false)

//CSS processing

//Style for vertical screen

@media all and (orientation:portrait){ }

//Style for horizontal screen

@media all and (orientation:landscape) { }

audio elements and video elements cannot be played automatically in ios and andriod

//Audio, writing method one

Your browser does not support it yet

//Audio, writing method two

先

// JS binding automatic playback (when operating Window, played music)

$ $ $ (window).one('touchstart', function(){

music.play();

})

//Compatible processing under WeChat

document.addEventListener("WeixinJSBridgeReady", function () {

Music.play();

}, false);

//Summary

//1. The autoplay attribute of the audio element cannot be used on IOS and Android, but works fine on PC

//2 When the .audio element does not set controls, it will occupy space on IOS and Android, but Chrome on PC will not occupy any space

Gravity sensing event

// Use HTML5 deviceMotion to call gravity sensing event

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 executed after shaking

                                                                       Lasty = y;

lastz = z;

}

Function yaoaaffter () {

// do something

}

// Instructions: Speaking of the case shaking the effect yao. js

The WeChat browser page is stuck after the user adjusts the font size. How to prevent the user from adjusting it

//The following code can prevent the Android page from being forced to change the size by the user's font zoom, but there will be a delay of about 1S, during which You can consider loading to handle it

if (typeof(WeixinJSBridge) == "undefined") {

document.addEventListener("WeixinJSBridgeReady", function (e) {

setTimeout(function(){

WeixinJSBridge .invoke(' setFontSizeCallback', { 'fontSize':0}, function(res){

                                                                                                         .

}else{

setTimeout(function(){

                    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize':0}, function(res){                                                                                                                  }, 0 )

}

//Under IOS, you can use -webkit-text-size-adjust to prevent users from adjusting the font size

body { -webkit-text-size-adjust:100%!important; }

//The best solution: It is best to use rem or percentage layout

The pitfalls of positioning

//Fixed positioning

//1. Fixed elements under ios are prone to positioning errors. When the soft keyboard pops up, it affects the positioning of fixed elements.

//2. The fixed performance under Android is better than that on iOS. When the soft keyboard pops up, it will not affect the positioning of fixed elements

//3. Position:fixed is not supported under iOS 4

//Solution: Use [Iscroll ](http://cubiq.org/iscroll-5), such as:

                                                 

<script></script>

    var myscroll;

    function loaded(){

        myscroll=new iScroll("wrapper");

    }

    window.addEventListener("DOMContentLoaded",loaded,false);

//position positioning

//When the soft keyboard pops up under Android, it affects the absolute element positioning

//Solution:

var ua = navigator.userAgent.indexOf( 'Android');

if(ua>-1){

$('.ipt').on('focus', function(){

$('.css').css({'visibility ':'hidden'})

  }).on('blur', function(){

                                                                                                         }

Video playback is not full screen