Shulou(Shulou.com)06/02 Report--

What this article shares with you is about the problems encountered in the development of mobile Web. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Retina pictures are compatible

This feature should not only care about the mobile side, but also the PC, because Apple uses retina not only on the mobile side (starting with the iphone4), but also on the MAC. First of all, retina means that dpr (device-pixel-ratio) is twice the size of an ordinary screen. Compared with CSS, the original setting in css is 1px, and in the actual screen display, it is also 1px. However, under retina, the 1px of css is the 2px of the actual screen.

The result is:

Some students will think, what will happen like this? The name looks the same size, why is the picture blurred? This is actually a feature of bitmaps. For example, a jpg file with a size of 200x300. So his actual screen pixel is 200px × 300px. Put it on the screen of dpr=1 and set the size to:

Width: 200px; height:300px

In this way, of course, it can be displayed normally. But in retina, each css px is equal to twice the px. In this way, the original normal display picture is magnified twice. It turns out that every point on the picture can be placed exactly on the dpr=1 screen, but in dpr=2, each point is split, so there is aliasing to cause blur.

And there are many solutions.

Use media query

This method is suitable for the addition of background images. The device-pixel-ratio query provided by css3 is used for execution. The simple demo is:

# myimage {width: 400px; height: 300px; background: url (lo-res.jpg) 00 no-repeat } / / this is mainly aimed at some Android devices @ media screen and (- webkit-min-device-pixel-ratio: 1.5), screen and (min--moz-device-pixel-ratio: 1.5), screen and (- o-min-device-pixel-ratio: 3 o-min-device-pixel-ratio 2), screen and (min-device-pixel-ratio: 1.5) {# myimage {background-image: url (hi-res.jpg) }} / / if you want to target Apple, you can use it directly: @ media only screen and (- webkit-device-pixel-ratio: 2), only screen and (- moz-device-pixel-ratio: 2), only screen and (- o-device-pixel-ratio: 2max 1) Only screen and (device-pixel-ratio: 2) {# myimage {background-image: url (hi-res.jpg) }}

But this is very expensive, and each time you need to prepare two jobs to do some very low-value work.

Use js to judge

In addition to writing redundant css code above, you can also use js to judge. Then, replace the contents of data-src for lazy loading.

If (window.devicePixelRatio > 1) {var images = $("img"); images.each (function (I) {var x1 = $(this) .attr ('data-src'); $(this) .attr (' src',x1);});}

Moreover, the support for this attribute is very high, almost all mobile phones and PC support it, except IE8.

Use vector graph

There are many ways to use vector graphics in web. For example, SVG, Fonts. These two should be the most suitable, but when drawing, most of them are in the form of bitmaps, so it is a bit difficult to convert them to SVG and fonts. For some small logo and icon, it's not a big problem. Moreover, the space occupied by the above two ways is also very small.

Basic situation of mobile phone

Now the problem with the phone is not the js script, but the page rendering. Because, the screen display of the mobile phone is all processed by CPU. There is no independent graphics card to draw the image like the PC end.

The keyboard on the phone

Usually encounter element tags that need to be entered, for example, when input gets focus, it will trigger the keyboard pop-up. However, for ios and Android, the keyboard pops are handled differently.

Ios keyboard

There are two ways to render the keyboard:

If input is already above the keyboard, it just pushes the control up a little to deduce the top of the keyboard.

If the input is below the keyboard, the keyboard overrides the control and pushes the entire page up until the control is above the keyboard.

In addition, when under ios7, if any element is a fixed attribute. Then, when you open the keyboard at this time, fixed may render as absolute. So, this is a real problem.

Android keyboard

Similarly, there are two situations.

* No problem with the species.

Second, when input is under the keyboard, the height of the entire document will be increased until the control height exceeds the keyboard height.

For android pushing the entire document up, for absolute positioning and fixed attribute positioning. There will be some problems. Increasing document does not increase the position of viewport, so if you use fixed, it may appear, and the element runs under the keyboard. However, because the keyboard is on top of the entire browser, you can't overwrite the keyboard. The general solution is to listen to the input focus event to dynamically set the location of the fixed. But it's so complicated.

Floppy disk type

For different inputs, the type displayed on the keyboard is actually different, the general compatibility is better: digital / mobile phone number. Can be set to:

Input [type=tel] input [type=number]

Floppy disk pops up manually

When the user does not trigger the focus event of input. It is triggered manually by the developer, and there are two different situations.

IOS

Ios6 before, when the control triggered the focus event, but the focus is not triggered by the user, then the keyboard will not pop up.

After ios6, you can manually add an autofocus attribute.

Android

As long as it is not triggered by the user, it cannot be popped up.

Put away the keyboard

The folding of the keyboard directly triggers the blur event of the js.

Page scrolling

There are two events from design to page scrolling, one is scroll, the other is touchmove.

In order to solve the performance problem on the mobile phone, the dynamic rendering of js is invalid when the page is scrolling, that is, it is invalid to use js to change the position of elements on the page. Don't wait until the page scrolling ends. This effect is mainly reflected in the mechanism of scroll event trigger. Below ios8, the rendering of js is paused while the page is scrolling. However, for Andriod 4.0 or above, scroll triggers are scrolling continuously.

If you want to set local scrolling, you can add the-webkit-overflow-scrolling: touch css attribute.

Flex problem

Due to historical reasons, I want to achieve the effect of flex on web. You need to pay attention to its compatibility, because there are three versions of flex, and the three versions are not the same. They are:

Display: box

Display: flexbox

Display: flex

Since Android uses the Webkit open source kernel, we need to prefix flex with webkit to be compatible with lower versions of Android.

Display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display: flex

The current compatibility is:

Old uses display: box

Tweener uses display: flexbox

New uses display: flex

Fixed problem

Using fixed in mobile is a complicated problem. Because, in the input, often designed to the keyboard pop-up, in view of the different effects of ios and android. It is possible for fixed to misplace when the keyboard pops up. For example:

Specific reference: fixed. In the past, ios5 did not support fixed, but after android 4.x, fixed is basically available.

Touch event resolution

300ms click delay

Click delay is a pit in the development of web mobile phones. Because manufacturers in the design of mobile phones, mainly take into account the scaling.

That is:

When you click *, the click time will not be triggered. The browser will wait for the 300ms delay and determine whether you have clicked again in the 300ms. If so, it will trigger the effect of zoom in. Later, the 300ms delay was cancelled, at the same time, long press to select the Chinese text was also cancelled. Later, I thought it was no good, so I added it again. In Chrome 32, IE/FF is all Ok. It has also been fixed recently in IOS 9.3.

But in the early days, you need to add it to the head tag.

/ / tell the browser to cancel the effect of double-click magnification

Or add a specific css attribute to a specific tag

Html {touch-action: manipulation;}

But FF does not support it.

Click penetration

This feature should be regarded as a classic. When a cover is covered on an a tag.

Www.villainhr.com

At this point, model is overwritten on the a tag. When you click on the cover layer, the cover layer disappears. (the mask layer binds to the tap event) because the click event has a 300ms delay, the jump effect of the a tag will be triggered. The solution is:

Set the delay vanishing effect of the cover layer. The delay time can be set to 300ms +.

Execute preventDefault () in touchend

Use plug-ins to disable click events and use analog instead.

Detailed explanation of touch event

There is no mouse-related operation on the phone, such as hover, mouseover, mousenter and so on. There are only related touch events.

Touchstart triggers when a finger touches the screen.

Touchmove triggers when a finger moves on the screen.

Touchend triggers when the finger is removed from the screen.

Touchcancel triggers when the finger touch is interrupted. There are several kinds of them.

. Other events interrupted the touch event. For example, the js operation forces a jump

. When the browser's UI is overwritten on the current web

. The hand index of touch exceeds the number of browsers supported. If it happens, then the touch of the finger will be cancelled.

/ / the following two events are not supported for now

Touchenter when the finger enters the specified element

Touchleave when the finger moves out of the specified element

Because when triggering touch events, not only the related touch events will be triggered, but also the related mouse and click events will be triggered. So, if the mouse and click events are affected, you need to display and use event.preventDefault () to cancel the later trigger mechanism.

In each touch event, the properties mounted to the event are also returned. Commonly used are:

Touches: attributes on the current screen

TargetTouches: attributes on the specified DOM element

ChangedTouches: returns the relevant hand index of the trigger time. For example, in the touchmove event, the finger that is moving is returned. In the touchend event, return the removed finger.

And every touch will have related attributes attached to it.

Identifier: the ID of every finger

Target: returns the DOM element that initially triggered the touch event

ScreenX/Y: returns the position relative to the entire phone screen.

PageX/Y: returns the position relative to the entire page, including the distance of the scroll.

ClientX/Y: returns the position relative to the browser viewport. Does not include scroll distance.

RadiusX/Y: returns the size of the major and minor axes of the gesture ellipse. At present, it is not supported yet. It is a bit similar to screenX/Y.

Touchmove's pit

Move without scrolling

When touchmove is triggered. If there are no restrictions, the effect of scroll will often be triggered. To eliminate this problem, you just need to disable the default behavior and ok.

Document.body.addEventListener ('touchmove', function (event) {event.preventDefault ();}, false)

Do not use touchmove as a rendering trigger

Because, the mechanism of touchmove is determined by the browser itself. The number of times he triggers is very limited. Therefore, we usually only use touchmove to get data, while rendering needs to use requestAnimationFrame.

Var touches = [] canvas.addEventListener ('touchmove', function (event) {touches = event.touches;}, false); / / Setup a 60fps timer timer = setInterval (function () {renderTouches (touches);}, 15)

Media inquiry

Media query mechanism has been proposed in css2. For example, for printers:

In css3, however, the media query mechanism has been supplemented. And with the exception of IE8, other browsers or mobile phones are supported. His main use is to distinguish between mobile phone, PC, screen size and so on.

Screen size

Let's take a look at a demo:

Set ipad.css to be loaded only when the screen size is between [641800]. If not, the browser will ignore the tag by default. Among them, the flag of only is very important. His main function is to tell browsers the rules that are ignored if they do not comply.

It is useful to judge mobile, pad and PC by the size of the screen.

Meta tag

Meta is mainly used to set the source information of a web page, such as zooming, width and so on. The most commonly used one is on the mobile phone.

/ / allow full-screen mode browsing / / ignore recognizing digits on the screen as phone numbers

Here is just some superficial arrangement, interested students, you can refer to the other two articles:

Summary of Mobile web problem

Talking about the Development experience of Wireless Web

If you encounter some relatively crappy problems later, it will be updated in time.

These are the problems encountered in mobile Web development. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.