Mobile terminal interface devicePixelRatio problem and mobile terminal soft keyboard keyCode

Now the granularity of the mobile terminal is getting smaller and smaller, so the definition is very high. For example, the devicePixelRatio of Huawei p9 is 4.

This is how perverted, devicePixelRatio is physical pixel/logical pixel = ratio devicePixelRatio, so

If the magnification is 4, a pixel is magnified 4 times on the device, so it is difficult to display the real 4 pixels on the device.

It can only be achieved by means of scaling, which is like why 1px borders are difficult to achieve on devices. Now devices are all

The magnification is 2, so I often see the CSS method of reducing 0.5 on the Internet, which is why I often see some UI design drawings

There will be picture designs such as @3x\@2x, because it is compatible with devices with 3 or 2 magnifications, pictures on mobile phones are most likely to be blurred.

target-densitydpi has been deprecated, so don't use it.

I have introduced vw before, you can use it, then you can develop it with less effort: gulp is automatically compiled into the vw unit of css

material:

Viewport mobile phone logical pixel and physical pixel principle

CSS Pixels, Physical Pixels, Logical Pixels, Device Pixel Ratio, PPI, Viewport

 

The keyCode of the mobile soft keyboard can only be obtained by keyup and keydown, and none of the others, or there are compatibility issues.
There are also general input too fast or too much input into the text box at one time, and input Chinese, etc., 229 will appear, so this is also a problem,
so I don't think it is necessary to use it, because it does not want to be used as accurately as the PC side.
There is also a soft keyboard that will change the height, so you can directly get the document height confirmation or resize event.
There are also multiple inputs that will not trigger the telescopic soft keyboard continuously, only after the first trigger, other switching triggers will not trigger.
So the six grids can be directly implemented with 6 inputs.

The type type is more effective on the mobile side.
For example, type=number is directly the number nine-square grid, and characters other than +-. numbers cannot be input.
Type=tel, just like the mobile phone, can only input the format content of the mobile phone.
such as numbers *# etc.

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325276593&siteId=291194637