Interview questions on mobile terminal, Android and IOS compatibility

1.IOS Mobile click event 300ms Corresponding delay ?

On mobile devices web The web page has 300ms The delay , It often causes delay or even failure of button clicking . This is due to the historical reasons for distinguishing between stand-alone events and double-click screen zoom .

Solution ：

fastclick It can solve the problem of clicking events on mobile phones 300ms Delay

zepto Of touch modular ,tap The event is also to solve in click Delay problem of

The corresponding order of the touch screen is touchstart-->touchmove-->touchend-->click, You can also use binding

ontouchstart event , To speed up the The response to the incident , solve 300ms Delay problem of

2. In some cases, for non clickable elements （label,span） monitor click event ,iso It will not trigger ?

css increase cursor：pointer

Set the upper cursor:pointer After attribute , This will cause a blue background to appear when the element is clicked .

Set... For the element -webkit-tap-highlight-color: transparent; Can solve this problem .

transparent: Transparent value

3. Let's talk about how to adapt the mobile terminal ?

There is no best way to adapt the front end , Only the right way , At present, the main adaptation methods of the front end are ： percentage ,em,rem, The media , Inquire about ( namely media query),flex Layout （ Elastic box ）,vw,vh etc.

At present, I use more in the project is rem,flex Layout , Sometimes media queries are used , Doing it pc For responsive layout

It was mainly made with one hand js library flexible.js, When the page changes , Detect page width , Divide 10 Share , Dynamic assignment to font-size. attribute .; The layout of the page is through rem To lay out , So you can adapt to all mobile devices

4. The keyboard blocks the input box ?

Element.scrollIntoView() // Scrolls the current element into the viewable area of the browser window

resolvent ：

var oHeight = $(document).height(); // The current height of the browser

$(window).resize(function(){

if($(document).height() < oHeight){

$("#footer").css("position","static");

}else{

$("#footer").css("position","absolute");

}

});

5.  Android partial version input Inside placeholder Position up ?

hold input Of line-height Set to norma

6.1px Border problem ?

transform: scale(calc(1/1));

7. Android browser view background picture , Some devices will blur

Because the resolution of mobile phone is too small , If the web page is displayed by resolution , The words will be very small , The android mobile phone devicePixoRadio More chaotic , Yes 1.5 Of , Yes 2 There are 3 Of . Want to make the picture more clear in the mobile phone , You have to use 2x Instead of img label （ In general, it's 2 Times ）, Or designate background-size:contain; Fine use -webkit-min-device-pixel-ratio You can make pictures of different multiples and sizes

8. Prevent pages from zooming in and out on your phone

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-

scale=1,maximum-scale=1,user-scalable=no" />

9.  When you pull the scroll bar up and down, it gets stuck 、 slow

body

{

-webkit-overflow-scrolling:touch;

overflow-scrolling:touch;

}

10.  Press and hold the page for a long time to flash back

element

{

-webkit-touch-callout:none;

}

 11. Responsive picture

In the mobile end , The handling of pictures should be very careful , Suppose that the size of a picture itself is X wide , Set and wrap it div The same width , If it is div There is no problem that the width is less than the width of the picture , But if div The width is greater than the width of the picture , The picture is stretched and distorted

resolvent ： Let the picture be only its own width at most