A little recently worked tips, Work tips

A little recently worked tips, Work tips

I have been busy with my work recently, but I have also accumulated some small tips, which is complicated, unsystematic, and not very in-depth. I just need to write a general record first, and then mine it in depth.

1.-webkit-tap-highlight-color

-Webkit-tap-highlight-color is an nonstandard attribute and does not appear in the CSS specification draft. When a user clicks a link in iOS Safari or a JavaScript clickable element, the highlighted color is overwritten. This attribute can only set transparency. If no transparency is set, iOS Safari uses the default transparency. When the transparency is set to 0, this attribute is disabled. When the transparency is set to 1, the elements are invisible when you click.

The above is a more specific description found on the Internet. What is the problem solved by this attribute?

Previously, a mobile page was created. When some buttons were clicked on ios devices, a transparent black box would appear, which is a problem. If you don't know what it is, you can search for a solution.

.btn{  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    }

As described in, when the transparency is set to 0, this attribute is disabled, that is, no transparent black box is displayed.

2.-webkit-user-select

This attribute determines whether users have the right to copy elements or text.

It is also a mobile page that requires that all text elements cannot be copied. This attribute can be used.

body{  -webkit-user-select: none;}

Whether ie is valid is not tested. If you are free, test it.

3. End-to-End automatic audio playback

Generally, to automatically play audio files on html5 pages, you only need to set the tag attribute autoplay.

<audio src="song.mp3" autoplay="autoplay" id="audio"></audio>

However, in actual development, it is found that there will be many mobile phones, which cannot be played automatically on the end, and there are both Android and ios. The specific reason is not clear. The iphone is the same as ios 9, it's embarrassing to have one 9.3 million records and one 9.1 million records.

This situation is more common on Android devices.

It has been searching for a long time on the Internet. The sdk that needs to be called can be used to call the play () method in wx. ready to ensure automatic playback.

Function autoPlayAudio1 () {wx. config ({// configuration information, wx can be used even if it is incorrect. ready debug: false, appId: '', timestamp: 1, nonceStr:'', signature: '', jsApiList: []}); wx. ready (function () {document. getElementById ('audio '). play ();});}

To be honest, this is also a good practice, but the actual measurement is feasible.