Mobile FAQ

Reprinted from: http://www.exp99.com/f2e/qianduankaifa_227.html

Mobile terminal common problems and solutions

1. Basic knowledge of meta

The H5 page window automatically adjusts to the device width and prevents the user from zooming the page

Ignore recognition of numbers in pages as phone numbers

Ignore the recognition of email addresses in the Android platform

When a website is added to the home screen quick launch mode, the address bar can be hidden, only for safari for ios

Add the website to the home screen quick launch method, only for ios's safari top status bar style

2. Frequently Asked Questions

How to define font-family on mobile terminal

The mobile font unit font-size chooses px or rem. For mobile devices that only need to be adapted, use px. For various mobile devices, use rem. For example, only devices with large resolution differences such as iPhone and iPad need to be adapted.

Mobile touch events (distinguish between webkit and winphone)

touch event triggered when the user's finger slides on the screen of the mobile device

The following support webkit:

1. touchstart - Occurs when a finger touches the screen. No matter how many fingers are currently

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

3. touchend - triggered when the finger leaves the screen

4. touchcancel - will be triggered when the system stops tracking touches. For example, during the touch process, suddenly the page alert() a prompt box, this event will be triggered at this time, this event is less used

Mobile click screen produces 200-300 ms delayed response

Web pages on mobile devices have a delay of 300ms, which often causes button click delays or even click failures.

solution

fastclick can solve 300ms delay on click event on mobile

Zepto's touch module, tap event is also to solve the delay problem in click

Response order to touch events

1、ontouchstart

2、ontouchmove

3、untouching

4、onclick

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

Bitmap in HD display is enlarged, picture becomes blurry?

Mobile mockups are usually designed to be twice as large as traditional PCs.

The front-end solution is: the length and width of the picture cut out from the design draft are guaranteed to be an even number, and the background-size is used to reduce the picture to 1/2 of the original;

For example, the width and height of the picture is: 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 visual draft of 40px Font, use style to write 20px: .css{font-size:20px}

How to remove the translucent gray mask generated when an element is touched in the ios system?

When an ios user clicks a link, a translucent gray mask will appear. 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 can be removed by setting it to 0 Translucent gray mask

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

How to remove the border generated when an element is clicked in some android systems?

When an android user clicks a link, a border or a translucent gray mask will appear. Different manufacturers define different effects. You can set the alpha value of -webkit-tap-highlight-color to 0 to remove the effects that come with some machines.

a,button,input,textarea{

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

-webkit-user-modify:read-write-plaintext-only;

}

A side effect of -webkit-user-modify is that the input method can no longer enter multiple characters

In addition, some models cannot be removed, such as Xiaomi Mi 2

There is another way for the button class, instead of using a or input tags, use div tags directly

Refer to "How to remove the border generated by the a tag on android"

1. How to remove the semi-transparent gray background generated when the input tag is clicked in the winphone system?

2. How to reset the default appearance of webkit form elements?

.css{-webkit-appearance:none;}

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

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

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

4. Can the text of the placeholder of the webkit form input box wrap?

ios can, android can't~

How to reset the default appearance of form elements in IE10 (winphone8)?

1. Disable the select default drop-down arrow

::-ms-expand is suitable for modifying the drop-down arrow of the form selection control. There are multiple property values. Setting it to hide (display:none) and modifying it with a background image can get the effect we want.

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

2. Disable the default style of radio and checkbox

::-ms-check is suitable for modifying the default icon of the form checkbox or radio button. It also has multiple attribute values. Setting it to hide (display:none) and decorating it with a background image can get the effect we want.

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

When the text input box of the form enters the content, the text clear button will be displayed. ::-ms-clear is suitable for the modification of the clear button. The same setting makes it hidden (display:none) and uses the background image to modify it to get what we want. Effect.

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{

display: none;

}

4. Prohibit ios long-pressing without triggering the system menu, prohibiting ios&android from downloading pictures when long-pressing

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

5, prohibit ios and android users from selecting text

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

Refer to "How to Change the Appearance of Form Elements (for Webkit and IE10)"

How to make phone calls and text messages?

1. make a phone call

2. Send text messages

winphone system is invalid

Simulate button hover effect

The effect of touching the button on the mobile terminal can clearly indicate that something is about to happen to the user, which is a relatively good experience, but there is no mouse pointer in the mobile device, and the hover using CSS cannot meet our needs. Fortunately, there is a foreign country that activates CSS Active effect, the code is as follows:

document.addEventListener("touchstart", function(){}, true)

</script>

Compatibility ios5+, some android 4+, winphone 8

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

varbtnBlue = document.querySelector(".btn-blue");

btnBlue.ontouchstart = function(){

this.className = "btn-blue btn-blue-on"

}

btnBlue.ontouchend = function(){

this.className = "btn-blue"

}

</script>

Screen rotation events and styles

1. Events

window.orientation, value: plus or minus 90 means landscape mode, 0 and 180 means portrait mode;

window.onorientationchange = function(){

switch(window.orientation){

case -90:

case 90:

alert("横屏:" + window.orientation);

case 0:

case 180:

alert("竖屏:" + window.orientation);

break;

}

2. Style

/*The style used when vertical screen*/

@media all and (orientation:portrait) { .css{} }

/*The style used in landscape */

@media all and (orientation:landscape) {

.css{}

}

audio element and video element cannot autoplay in ios and andriod

Solution: touch the screen to play

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

audio.play()

})

You can refer to "audio elements that cannot be played automatically"

shake function

HTML5 deviceMotion: An event that encapsulates motion sensor data, and can obtain data such as motion acceleration when the mobile phone is in motion.

Taking pictures and uploading pictures with your mobile phone

<input type="file">的accept 属性

Summary of use: ios has the functions of taking pictures, videos, and selecting local pictures, some androids only have the function of selecting local pictures, and winphone does not support

After WeChat browser users adjust the font size, the page is cluttered, how can I prevent users from adjusting?

reason

Anroid overwrites the layoutinflater and handles the textview uniformly

Ios modifies the body.style.webkitTextSizeAdjust value

Common solution: no solution for android

ios disable font size adjustment with -webkit-text-size-adjust

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

The best solution: layout the entire page with rem or percentage

Eliminate transition splash screen

.css{

/*Set how the embedded element is rendered in 3D space: keep 3D*/

-webkit-transform-style: preserve-3d;

/* (Set whether the back side of the transitioning element is visible when facing the user: hidden) */

-webkit-backface-visibility: hidden;

}

Enable hardware acceleration to solve page flickering and 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);

}

Refer to "Enable hardware acceleration with CSS to improve website performance"

Cancel input under ios, the default capitalization of the first letter of English when inputting

remove voice input button on android

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

android 2.3 bug

@-webkit-keyframes needs to start with 0% and end with 100%, the percent sign of 0% cannot be removed

After and before pseudo-classes cannot use animation

border-radius does not support % units

The spelling of translate percentage and scale together will cause failure, for example -webkit-transform: translate(-50%,-50%) scale(-0.5, 1)

android 4.x bug

The browser in Samsung Galaxy S4 does not support border-radius abbreviation

When setting border-radius and background color at the same time, the background color will overflow beyond the rounded corners

Some mobile phones (such as Samsung), a link supports the mouse:visited event, which means that the text turns purple after the link is accessed

Refer to "border-radius moving injury"

Several Elements of Designing High-Performance CSS3 Animations

Use the synthetic properties transform and opacity as much as possible to design CSS3 animations, do not use the left and top of position for positioning

Use translate3D to enable GPU acceleration

Refer to "High Performance Animations"

fixed bug

Fixed elements are prone to positioning errors under ios. When the soft keyboard pops up, the positioning of fixed elements is affected.

Fixed performance under android is better than iOS, when the soft keyboard pops up, it will not affect the positioning of the fixed element

position:fixed is not supported under ios4

Solution: isroll.js available, no perfect solution yet

refer to

"Summary of the problem of using position:fixed on mobile web pages"

"Use iScroll.js to solve the problem that position:fixed is not supported under ios4"

How to prevent default touch events for Windows Phone

The default touch event event under winphone is invalid using e.preventDefault

The current workaround is to use styles to disable

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

Reference: "Windows phone 8 touch support"

Common mobile frameworks

zepto.js

The syntax is almost the same as jquery, and jquery will basically know zepto~, the latest version has been updated to 1.16, the official website: http://zeptojs.com/

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

Commonly used extension modules:

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 the problem that the page does not support elastic scrolling and does not support fixed~, realize pull-down refresh, slide screen, zoom and other functions~, the latest version has been updated to 5.0

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

swipe frame

It is suitable for the effect of sliding screen switching pages such as up and down sliding screen, left and right sliding screen, etc.

slip.js， iSlider.js，fullpage.js

Guess you like