1. When looking at the background picture with an Android browser, some devices will be blurred.
It is very clear on a PC with the same proportion of pictures, but it is very blurry on the phone. What is the reason?
After research, it was the devicePixelRatio that caused the problem. Because the resolution of the mobile phone is too small, if the web page is displayed according to the resolution, the words will be very small. So Apple initially displayed the resolution of iPhone 4's 960640 on the web page, so devicePixelRatio=2. Now Android is quite messy, with 1.5, 2 and 3.
If you want the picture to be displayed more clearly on your phone, you must use a 2x background image instead of the img tag (generally, 2 times). For example, the width and height of a div are 100100, the background image must be 200200, and then background-size:contain;, so that the displayed image will be clearer.
The code can be as follows:
background:url(../images/icon/all.png) no-repeat center center;-webkit-background-size:50px 50px;background-size:50px 50px;display:inline-block; width:100%; height:50px;
Or specify background-size:contain; either, please give it a try!
2. Picture loading
If you encounter the problem of slow image loading, in this case, mobile phone development generally uses the canvas method to load:
For the specific canvas API, please refer to: http://javascript.ruanyifeng.com/htmlapi/canvas.html
Here is an example of a canvas:
<li><canvas></canvas></li>
js dynamically loading pictures and li. A total of 17 pictures are given!
var total=17; var zWin=$(window); var render=function(){ var padding=2; var winWidth=zWin.width(); var picWidth=Math.floor((winWidth-padding*3)/4); var tmpl =''; for (var i=1;i<=totla;i++){ var p=padding; var imgSrc='img/'+i+'.jpg'; if(i%4==1){ p=0; } tmpl +='<li><canvas id="cvs_'+i+'"></canvas></li>'; var imageObj = new Image(); imageObj.index = i; imageObj.onload = function(){ var cvs =$('#cvs_'+this.index)[0].getContext('2d'); cvs.width = this.width; cvs.height=this.height; cvs.drawImage(this,0,0); } imageObj.src=imgSrc; } } render();3. If the mobile website does not need to be compatible with IE browser, we generally use zeptojs . zeptojs built-in Touch events method, please refer to http://zeptojs.com/#Touch events
I took a look at the new version of zeptio API, which already supports IE10 or above browsers, and you can choose to use zeptojs!
4. Prevent the web pages from enlarging and shrinking in mobile phones . This is the most basic point. What mobile website developers should know most is to set up viewport in meta.
Also, we have seen the following statement on some mobile websites:
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
The way to set DTD is XHTML. If our page uses html5, you can directly declare <!DOCTYPE html> without setting DTD.
Use viewport to prevent the page from zooming. Usually set user-scalable to 0 to turn off user scaling of page view.
<meta name="viewport" content="user-scalable=0" />
But for better compatibility, we will use the full viewport settings.
The code copy is as follows:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
Of course, user-scalable=0, and some people also write user-scalable=no, both of which are OK.5. apple-mobile-web-app-capable
apple-mobile-web-app-capable is to set whether the web application runs in full screen mode.
grammar:
<meta name="apple-mobile-web-app-capable" content="yes">
illustrate:
If the content is set to yes, the web application will run in full screen mode, otherwise, it will not. The default value of content is no, indicating normal display. You can use the read-only property window.navigator.standalone to determine whether the web page is displayed in full screen mode.
6. format-detection
format-detection Enables or disables the phone number in the automatic recognition page.
grammar:
<meta name="format-detection" content="telephone=no">
illustrate:
By default, the device automatically recognizes any string that may be a phone number. Setting telephone=no can disable this feature.
7. HTML5 calls the dialing function of Android or iOS
html5 provides tags that automatically call dialing, just add tel: in the href of the tag a tag.
as follows:
<a href="tel:4008106999,1034">400-810-6999 Turn to 1034</a>
Call your phone directly as follows
<a href="tel:15677776767">Click to call 15677776767</a>
8. HTML5GPS positioning function
For details, please see: //www.VeVB.COM/post/html5_GPS_getCurrentPosition
9. When pulling the scroll bar up and down, it is stuck or slow
body { -webkit-overflow-scrolling: touch; overflow-scrolling: touch;}Android3+ and iOS5+ support CSS3 new attributes are overflow-scrolling
10. Copying or selecting text is prohibited
Element { -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;}Solve the text of the page that can be selected for mobile devices (depending on product needs)
11. Press and hold the page for a long time and crash
element { -webkit-touch-callout: none;}12. Default shadows in the input box under iPhone and iPad
Element{ -webkit-appearance: none; }13. Translucent gray mask appears when touching elements under iOS and Android
Element { -webkit-tap-highlight-color:rgba(255,255,255,0)}Setting the alpha value to 0 can remove the translucent gray mask. Note: The property value of transparent is invalid under Android.
The following article has a detailed introduction, address: http://www.VeVB.COM/post/phone_web_ysk
14. Active compatibility processing is pseudo-class: active invalid
Method 1: Add ontouchstart to body
<body ontouchstart="">
Method 2: JS binds touchstart or touchend events to document
<style>a { color: #000;}a:active { color: #fff;}</style><a herf=foo >bar</a><script> document.addEventListener('touchstart',function(){},false);</script>15. Animation definition 3D enables hardware acceleration
Element { -webkit-transform:translate3d(0, 0, 0) transform: translate3d(0, 0, 0);}Note: 3D deformation will consume more memory and power
16. 1px border of Retina screen
Element{ border-width: thin;}17. Webkit mask compatible processing
Some low-end phones do not support css3 mask, and can be downgraded optionally.
For example, you can use js judgment to refer to different classes:
if( 'WebkitMask' in document.documentElement.style){ alert('s support mask');} else { alert('s not supported mask');}18. Issues of font size adjustment when rotating the screen
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%;}19. Transition flash screen
/Set how embedded elements are rendered in 3D space: preserve 3D /-webkit-transform-style: preserve-3d;/ Set whether the back of the element that is converted is visible when facing the user: Hide/-webkit-backface-visibility:hidden;
20. Round corner bug
Some Android phones have rounded corners failed
background-clip: padding-box;
21. Top status bar background color
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
illustrate:
Unless you first use apple-mobile-web-app-capable to specify full screen mode, this meta tag will not work.
If the content is set to default, the status bar will be displayed normally. If set to blank, the status bar will have a black background. If set to blank-translucent, the status bar appears black translucent. If set to default or blank, the page is displayed below the status bar, that is, the status bar occupies the upper part and the page occupies the lower part. Both are not blocked by the other party or are blocked. If set to blank-translucent, the page fills the screen, where the top of the page is covered by the status bar (it covers the page's height by 20px, while the Retina screen for iPhone4 and itouch4 is 40px). The default value is default.
22. Set up cache
<meta http-equiv="Cache-Control" content="no-cache" />
Mobile pages are usually cached after the first load, and each refresh uses the cache instead of resending the request to the server. If you do not want to use cache, you can set no-cache.
23. Desktop icons
<link rel="apple-touch-icon" href="touch-icon-iphone.png" /><link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" /><link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" /><link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
Define different desktop icons for different devices under iOS. If not defined, use the current screenshot as the icon.
The above writing method may be thought to have a default gloss. The following setting method can remove the gloss effect and restore the effect of the design drawing!
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
The image size can be set to 5757 (px) or Retina can be set to 114114 (px), and the iPad size is 72*72 (px)
24. Start screen
<link rel="apple-touch-startup-image" href="start.png"/>
The picture displayed when the page is started to load under iOS is to avoid the white screen when loading.
Different sizes can be specified through matrix:
<!--iPhone--><link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" /><!-- iPhone Retina --><link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!-- iPhone 5 --><link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png"><!-- iPad portrait --><link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" /><!-- iPad landscape --><link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" /><!-- iPad Retina portrait --><link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /><!-- iPad Retina landscape --><link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />
25. Browser private and other meta
The following attributes have not been applied in the project, you can write a demo to test the following!
QQ Browser Private
Full screen mode
<meta name="x5-fullscreen" content="true">
Forced vertical screen
<meta name="x5-orientation" content="portrait">
Forced horizontal screen
<meta name="x5-orientation" content="landscape">
Application mode
<meta name="x5-page-mode" content="app">
UC Browser Private
Full screen mode
<meta name="full-screen" content="yes">
Forced vertical screen
<meta name="screen-orientation" content="portrait">
Forced horizontal screen
<meta name="screen-orientation" content="landscape">
Application mode
<meta name="browsermode" content="application">
other
Optimized for handheld devices, mainly for some old browsers that do not recognize viewports, such as BlackBerry
<meta name="HandheldFriendly" content="true">
Microsoft's old browser
<meta name="MobileOptimized" content="320">
Windows phone click without highlights
<meta name="msapplication-tap-highlight" content="no">
26. Keyup, keydown, and keypress support in IOS is not very good
The problem is this: when using input search for fuzzy search, enter keywords in the keyboard, and query through the ajax background, then return the data, and then mark the keywords for the returned data red. It is OK to use input to monitor keyboard keyup events in Android mobile browsers, but it turns red very slowly in iOS mobile browsers. After inputting using the input method, the keyup event is not immediately corresponding. It can only be corresponding after deletion!
Solution:
You can use the oninput event of html5 to replace keyup
<input type="text" id="testInput"><script type="text/javascript"> document.getElementById('testInput').addEventListener('input', function(e){ var value = e.target.value; });</script>Then you will achieve a keyup-like effect!
27. The problem of setting h5 website input to type=number
Setting the type of input of h5 web page to number generally causes three problems. One problem is that the maxlength attribute is not easy to use. The other one is that when form is submitted, it is rounded by default. Third, some Android phones have style problems.
Once the problem is solved, I am currently using js. as follows
<input type="number" oninput="checkTextLength(this ,10)"> function checkTextLength(obj, length) { if(obj.value.length > length) { obj.value = obj.value.substr(0, length); } }Question 2 is because form submission defaults to form verification, step default is 1, and the step attribute needs to be set. If 2 decimal places are retained, the writing method is as follows:
<input type="number" step="0.01" />
Regarding step, I will give a brief introduction here. In input type=number, an up and down arrow will generally be automatically generated. Clicking the up arrow will add a step by default. Clicking the down arrow will reduce a step by default. The default step in number is 1. That is, step=0.01, you can allow input of 2 decimal places, and click the up and down arrows to increase 0.01 and decrease 0.01 respectively.
If step and min are used together, the value must be between min and max.
See the following example:
<input type="number" step="3.1" min="1" />
What numbers can be entered in the input box?
First, if the minimum value is 1, you can enter 1.0, the second one is to enter (1+3.1), that is 4.1, and so on, each click on the up and down arrow will increase or decrease by 3.1, and input other numbers will be invalid. This is the brief introduction to step.
Question 3: Remove the default input style
input[type=number] { -moz-appearance:textfield;}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}28. The ios setting input button style will be overwritten by the default style
The solution is as follows:
input,textarea { border: 0; -webkit-appearance: none; }Set the default style to none
29. IOS keyboard letter input, default initial letter capitalization
Solution: Set the following properties
<input type="text" autocapitalize="off" />
30. Select drop-down select Set right alignment
Settings are as follows:
select option {direction: rtl;}31. Skew deformation is performed through transform, rotate rotation will cause jagging
It can be set as follows:
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0); transform: rotate(-4deg) skew(10deg) translateZ(0); outline: 1px solid rgba(255,255,255,0)
32. Mobile click 300ms delay
300ms is still acceptable, but we must solve the problem caused by 300ms. 300ms causes the user experience to be not very good. To solve this problem, we generally use tap events to replace click events on the mobile side.
Two js are recommended, one is fastclick and the other is tap.js
For 300ms delay, please see: http://thx.github.io/mobile/300ms-click-delay/
33. Mobile endpoint penetration problem
Examples are as follows:
<div id="haorooms">Nod event test</div><a href="www.VeVB.COM">www.VeVB.COM</a>
The div is the absolute positioning mask, and the z-index is higher than a. The a tag is a link in the page, we bind the tap event to the div:
$('#harooms').on('tap',function(){$('#harooms').hide();});When we click on the mask layer, the div disappears normally, but when we click on the mask layer on the a tag, we find that the link a is triggered, which is called a point-through event.
reason:
touchstart precede touchend precede click. That is, click triggering is delayed, and this time is about 300ms. That is to say, the mask is hidden after our tap triggers. At this time, the click has not been triggered. After 300ms, our click triggers to the link below because the mask is hidden.
solve:
(1) Try to use the touch event to replace the click event. For example, use touchend event (recommended).
(2) Use fastclick, https://github.com/ftlabs/fastclick
(3) Use preventDefault to block the click of a tag
(4) Delay a certain time (300ms+) to handle events (not recommended)
(5) The above can generally be solved, but if it really doesn't work, it will be replaced by a click incident.
The following is the touchend event, as follows:
$("#harooms").on("touchend", function (event) { event.preventDefault(); });34. Eliminate the fork number in IE10
input:-ms-clear{display:none;}35. Regarding the optimization of fonts on iOS and OS X (there will be inconsistent font bolding on the horizontal and vertical screens, etc.)
The font size will be reset when the iOS browser is landscaped. Setting text-size-adjust to none can solve the problem on iOS, but the font scaling function of Safari on the desktop version will be invalid, so the best solution is to turn text-size-adjust to 100%.
-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;
36. About iOS system, when entering English with Chinese input method, a one-sixth space may appear between the letters.
Can be removed by regular
this.value = this.value.replace(//u2006/g, '');
37. Mobile HTML5 audio autoplay failure problem
This is not a bug. Since automatically playing audio or video in web pages will cause some troubles or unnecessary traffic consumption to users, Apple and Android systems usually prohibit automatic playback and triggered playback using JS. It must be triggered by the user before it can be played.
Solution: First touch the user touchstart, trigger playback and pause (the audio starts loading, and then use JS to operate it again).
Solution code:
document.addEventListener('touchstart', function () { document.getElementsByTagName('audio')[0].play(); document.getElementsByTagName('audio')[0].pause();});38. The problem of placeholder not being supported on the mobile HTML5 input date
I don't think there is any good solution to this, use the following method
The code copy is as follows:
<input placeholder="Date" type="text" onfocus="(this.type='date')" id="date">
Some browsers may need to click twice!39. Some models have input with type search, and their own close button style modification method is provided.
Some models of search input controls will come with a close button (a pseudo-element), and usually in order to be compatible with all browsers, we will implement one by ourselves. At this time, the method to remove the native close button is
#Search::-webkit-search-cancel-button{ display: none; }If you want to use the native close button and want it to conform to the design style, you can modify the style of this pseudo-element.
40. Encourage the option to expand
zepto method:
$(sltElement).trrgger("mousedown");Native js method:
function showDropdown(sltElement) { var event; event = document.createEvent('MouseEvents'); event.initMouseEvent('mousedown', true, true, window); sltElement.dispatchEvent(event);};