H5 Front-end Development and Filling Consolidation

Keywords: Mobile iOS Android Attribute

meta-basic knowledge

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

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

Ignore identifying numbers on pages as phone numbers

<meta name="format-detection" content="telephone=no" />

Ignore the identification of mailbox address in Android platform

<meta name="format-detection" content="email=no" />

When a website is added to the home screen in Quick Start mode, the address bar can be hidden, only for safari of ios

<meta name="apple-mobile-web-app-capable" content="yes" />
<! - Since version 7.0 of ios, no effect has been seen on safari - >

Adding a website to the Home Screen Quick Start mode only for the safari top status bar style of ios

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- Optional default,black,black-translucent -->

viewport template
viewport Template - Universal

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
//Let's start here.
</body>

</html>

viewport template - target-densitydpi=device-dpi, Android version 2.3.5 below does not support

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width Values are consistent with the width of the page definition -->
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>

<body>
//Let's start here.
</body>

</html>

Reference cases: http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl

Common problem

How to define font-family on mobile end
Chinese font can be used by default, while English font can be used by Helvetica.

/* Code that defines fonts on the mobile side */
body{font-family:Helvetica;}

Reference< Consideration on the Use of Font in Mobile End>

font-size for mobile font unit to choose px or rem
For only a few mobile devices need to be adapted, and the resolution has little effect on the page, use px.

For devices that need to be adapted to a variety of mobile devices, use rem, such as devices with relatively large resolution differences such as the iPhone and the iPad.

rem configuration reference:

html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}

Mobile touch events (distinguishing webkit from winphone)
touch events triggered when the user's finger is placed on the mobile device and slides on the screen

The following support webkit

  • Touch start - occurs when the finger touches the screen. No matter how many fingers there are at present
  • Touch move - a continuous trigger when the finger is sliding on the screen. Usually when we slide the page again, we call preventDefault() of event to prevent the default from happening: to prevent the page from scrolling
  • Touch end - Triggered when the finger leaves the screen
  • Touch cancel - The system triggers when it stops tracking the touch. For example, a prompt box on alert() suddenly appears on the page during touching, triggering the event, which is rarely used.

TouchEvent

  • touches: information about all fingers on the screen
  • Target Touches: Finger information in the target area
  • changedTouches: Finger information that triggered the last event
  • touches and targetTouches are deleted when touchend is touched. The last information saved by changedTouches is best used to calculate finger information.

Parameter information (changedTouches[0])

  • The coordinates of clientX and clientY in the display area
  • target: Current element

Reference: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent

The following support winphone 8

  • MSPointerDown - occurs when the finger touches the screen. No matter how many fingers there are at present
  • MSPointerMove - Continuous triggering when the finger is sliding on the screen. Usually when we slide the page again, we call css's html{-ms-touch-action: none;} to prevent the default from happening: to prevent the page from scrolling
  • MSPointerUp - Triggered when the finger leaves the screen

Mobile click Screen Generates 200-300 ms Delayed Response

web pages on mobile devices have 300 ms delay, and 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 the link simply or double-clicks the partition to zoom in. Therefore, after the first click, the browser will capture the click. 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.

Solution:

  • 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

Response order of touch events

  1. ontouchstart
  2. ontouchmove
  3. ontouchend
  4. onclick

To solve the problem of 300 ms delay, you can also speed up response to events by binding ontouchstart events

What is a Retina screen and what problems it poses
Retina: a liquid crystal screen with super-high pixel density. The pixels displayed on a screen of the same size change from one to more. For example, on a screen with the same tape, in the retina display of an Apple device, one pixel changes to 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 the traditional PC.

Then, the front-end response is:

The length and width of the cut pictures are guaranteed to be even, and the backgroud-size is used 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}

Reference< The Principle and Design Scheme of High Definition Display Screen>

How to remove the translucent grey mask when the elements are touched in ios system

ios users click on a link and a translucent grey mask appears. If you want to disable it, you can set the alpha value of - webkit-tap-highlight-color to 0, that is, the last bit of the attribute value is set to 0 to remove the translucent grey mask.

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

How to remove the border generated by clicking on elements in some android systems

android users click on a link and a border or a translucent gray mask will appear. Different manufacturers define different amounts. The alpha value of webkit-tap-highlight-color can be set to 0 to remove the effect of some machines.

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.

In addition, 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.

Reference< How to remove the border generated by a tag on android>

How to remove the translucent grey background when the winphone system a and input tags are clicked

<meta name="msapplication-tap-highlight" content="no">

How to reset the default appearance of webkit form elements

.css{-webkit-appearance:none;}

Can the color value of the webkit form input box placeholder be changed?

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

Can the text of the webkit form input box placeholder wrap lines?
ios can, android can't~

You can change lines under the textarea tag~

How to reset the default appearance of IE10 (winphone8) form elements
Disable select Default drop-down arrow

:: - ms-expand is suitable for modifying the drop-down arrow of the form selection control. It has multiple attribute values. Setting it to hide (display:none) and using background images to modify can get the desired effect.

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

Disable radio and checkbox default styles

:: - ms-check applies to the modification of the default icon of the form check box or radio button. There are also multiple attribute values. Setting it to hide (display:none) and using background images to modify can get the desired effect.

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

Disable the default Clear Button for PC-side Form Input Box

When the form text input box enters the content, the text clearance button will be displayed: -ms-clear is suitable for the modification of the clearance button, the same settings make it hide (display:none) and use the background image to modify it to get the desired effect.

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

Prohibit ios from long-time and non-triggering menus of the system, and prohibit ios & Android from downloading pictures on long-time and on time

.css{-webkit-touch-callout: none}

Prohibit ios and android users from selecting Chinese characters

.css{-webkit-user-select:none}

Reference< How to change the appearance of form elements (for Webkit and IE10)>

How to Realize Calling, Sending Short Messages and Writing Emails
Phone

<a href="tel:0755-10086">Call:0755-10086</a>

Send SMS, winphone system is invalid

<a href="sms:10086">Text to:10086</a>

Write email for reference< The Method of Sending Mail to Users by Mobile web Pages>

<a href="mailto:peun@foxmail.com">peun@foxmail.com</a>

Analog button hover effect
The effect of touching the button on the mobile side can show that something is happening to the user, which is a better experience. But there is no mouse pointer in the mobile device. The hover using css can not meet our needs. Fortunately, there is an active effect of activating css abroad. The code is as follows.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">Button</div>

<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>

Compatibility IOS 5+, partial android 4+, winphone 8

To achieve full compatibility, you can control the class name of the button by binding ontouchstart and ontouchend

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>

<div class="btn-blue">Button</div>

<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
this.className = "btn-blue"
}
</script>
</body>
</html>

Events and Styles of Screen Rotation
Event
window.orientation, take the value: positive and negative 90 for horizontal screen mode, 0 and 180 for vertical screen mode;

window.onorientationchange = function(){
switch(window.orientation){
case -90:
case 90:
alert("Horizontal screen:" + window.orientation);
case 0:
case 180:
alert("Vertical screen:" + window.orientation);
break;
}
}

style

//Styles used for vertical screens
@media all and (orientation:portrait) {
.css{}
}

//Styles used in horizontal screen
@media all and (orientation:landscape) {
.css{}
}

audio and video elements cannot be automatically played in ios and andriod
Solution: Touch-screen broadcast

$('html').one('touchstart',function(){
audio.play()
})

Reference< audio elements that cannot be played automatically>

Shake-and-shake function
HTML5 device Motion: It encapsulates events of motion sensor data, and can obtain data such as motion acceleration of mobile phone in motion state.

Mobile Photo and Upload Pictures
The accept attribute of <input type="file">

<! - Choose Photos - >.
<input type=file accept="image/*">
<! - Choose Video - >.
<input type=file accept="video/*">

Use summary:

ios has the functions of taking pictures, videos and choosing local pictures
Some Androids only have the ability to select local images
winphone does not support
input controls are ugly by default
Wechat browser user adjusts font size after page crash, how to prevent users from adjusting
Reason

On the android side, the layoutinflater is rewritten to unify the textview.
On the ios side, the body.style.webkitTextSizeAdjust value was modified
Solution:

android uses the following code, which is only valid in wechat browser (thanks to jationhuang)

/**
* Add this code to the page so that Android machine pages are no longer forced to resize by user font zooming
* But there will be a delay of about a second, during which you can consider loading the display.
* For reference only
*/
(function(){
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);
}
})();

ios uses - webkit-text-size-adjust to prohibit font size adjustment

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

The best solution:

The entire page is laid out in rem or percentage
Eliminate transition Flash Screen
That's what the Internet says, but I didn't test it out.

.css{
/*Setting how embedded elements are rendered in 3D space: Keep 3D*/
-webkit-transform-style: preserve-3d;
/*(Set whether the back of the converted element is visible to the user: hidden)*/
-webkit-backface-visibility: hidden;
}

Turn on hardware acceleration
Solve page blinking
Ensure 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);
}

Reference< Using CSS to Open Hardware Acceleration to Improve Web Site Performance>

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

<input autocapitalize="off" autocorrect="off" />

android Remove Voice Input Button

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

android 2.3 bug

  • @- webkit-keyframes need to start at 0% and end at 100%, and 0% can't be removed.
  • after and before pseudo classes cannot use animation
  • border-radius does not support% units
  • Writing translate percentages together with scales can lead to invalidation, such as - webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

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

Reference< border-radius Moving Injury>

Several Elements of Designing High Performance CSS3 Animation

  • Use synthetic properties transform and opacity as much as possible to design CSS3 animation, and do not use position left and top to locate.
  • Open GPU Acceleration with translate3D

Reference< High Performance Animations>

fixed bug

  • Fixed elements under ios are easy to locate errors. When a soft keyboard pops up, the location of fixed elements will be affected.
  • Fixed performance under android is better than iOS. When a soft keyboard pops up, it will not affect the location of fixed elements.
  • position:fixed is not supported under ios4

Solution

  • With isroll.js, there is no perfect solution.

Reference resources

<Summary of the Use of position:fixed in Mobile web Pages>

<Using iScroll.js to solve the problem of position:fixed not supported under ios4>

How to Prevent windows Phone's Default Touch Events
The default touch event event using e.preventDefault under winphone is invalid

The current solution is to disable styles

html{-ms-touch-action: none;}/* Disable winphone default touch events */

Reference resources

<Windows phone 8 touch support>

Playing video incomplete screen

<!--
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>

Common Mobile Framework

zepto.js

The syntax is almost the same as jquery, and jQuery basically zepto ps.~

The latest version has been updated to 1.16

Official website: http://zeptojs.com/

Chinese (non-official website): http://www.css88.com/doc/zeptojs_api/

Extension modules commonly used:

Browser Detection: https://github.com/madrobby/zepto/blob/master/src/detect.js

tap event: https://github.com/madrobby/zepto/blob/master/src/touch.js

iscroll.js

Solve problems caused by page not supporting elastic scrolling and fixed~

Realize drop-down refresh, slide screen, zoom and other functions~

The latest version has been updated to 5.0

Official website: http://cubiq.org/iscroll-5

underscore.js

I haven't used it, but I've heard it's easy to use. I recommend it to you.~

The library provides a set of practical functions for functional programming, but does not extend any JavaScript built-in objects.

The latest version has been updated to 1.8.2

Official website: http://underscorejs.org/

Screen Frame

Suitable for up-down screen, left-right screen and other sliding screen switching page effect

slip.js

iSlider.js

fullpage.js

flex layout
flex layout can be used in mobile at present, not all grammars are fully compatible, but the following writings have been practiced by the author, and the effect is good.~

/* ============================================================
flex: Define layout as box model
flex-v: Vertical Layout of Box Model
flex-1: Subelements occupy the remaining space
flex-align-center: Vertical Centralization of Subelements
flex-pack-center: The level of sub-elements is in the middle
flex-pack-justify: Alignment of child elements at both ends
 Compatibility: ios 4+, android 2.3+, winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

Example: Alignment at both ends

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
/* ============================================================
flex: Define layout as box model
flex-v: Vertical Layout of Box Model
flex-1: Subelements occupy the remaining space
flex-align-center: Vertical Centralization of Subelements
flex-pack-center: The level of sub-elements is in the middle
flex-pack-justify: Alignment of child elements at both ends
 Compatibility: ios 4+, android 2.3+, winphone8+
============================================================ */
.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
</style>
</head>
<body>

<div class="flex flex-pack-justify">
<div>Module I</div>
<div>Module II</div>
<div>Module 3</div>
<div>Module IV</div>
</div>

</body>
</html>

Note: Subelements under flex must be block-level elements, while non-block-level elements fail flex on Android 2.3 machines

Reference resources:

flexyboxes

Old Flexbox and New Flexbox

Flexbox across browsers

FastClick

Eliminate 300 delays between triggering click events on mobile browsers and a physical Tap

Reference< FastClick>

Posted by abigbluewhale on Sun, 30 Jun 2019 12:24:13 -0700

Hot Keywords

©2024 Programmer Group