Mobile web layout precautions and solutions

1. Winphone system a. How to remove the translucent gray background generated when the input tag is clicked

<meta name="msapplication-tap-highlight" content="no">


1. Turn off the automatic capitalization of the first letter of the iOS keyboard

<input type=" text" autocapitalize="off" />

2. Disable text scaling

html {
-webkit-text-size-adjust: 100%;
}

3. How to clear the shadow inside the input box on the mobile side

On iOS, the input box has an inner shadow by default. But you can't use box-shadow to clear it. If you don't need shadow, you can turn it off like this:

input,
textarea {
border: 0;
-webkit-appearance: none;
}


4. Ignore the number of the page as phone, ignore email identification

<meta name= "format-detection" content="telephone=no, email=no"/>


5. Fast rebound scrolling.xxx

{
overflow: auto;
-webkit-overflow-scrolling: touch;
}
PS: iScroll doesn't feel very good after using it. There are some weird bugs. Here is another iDangero Swiper. This plugin integrates the powerful function of sliding screen scrolling (supports 3D), and also has a built-in scroll bar for rebound scrolling. Official address:

http://www.idangero.us/sliders/swiper/index.php



6. The mobile terminal prohibits the selection of content

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


7. The mobile terminal cancels

the . When the mobile page is used, you will find that all a tags trigger clicks or all elements with pseudo-class: active , the default will display a highlight box when it is active. If you don't want this highlight, then you can pass the following css Method to prohibit:

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


8. How to prohibit saving or copying images

Usually when you long press the image img on the phone or pad, it will Pop-up options to store images or copy images, if you don't want users to do this, then you can disable it by the following method:

img {
-webkit-touch-callout: none;
}
PS: It should be noted that this method is only available on iOS efficient.



9. Solve the problem that fonts appear jagged after scaling down on the mobile terminal:

-webkit-font-smoothing: antialiased;


10. Grid layout:

box-sizing:border-box; can change the calculation method of the box model to facilitate you to set the width for adaptive flow layout



11, input[type=input]{-webkit-appearance:none;} remove the ios style, but this There is a bug in the attribute, which will cause iso to fail to obtain the checkbox value. Reassigning input[type=checkbox]{-webkit-appearance:checkbox;} to this element will not report an error.



12. To realize the effect of the button being pressed, you need to add a:active attribute to the a tag and add an empty function

document.body.addEventListener('touchend', function () { });


13. To solve the problem of removing the lower border:

-webkit- border-bottom:none;


14. English text wrap (do not split words):

word-wrap:break-word


15. Use pt or em, rem for font size instead of px.


16. Set the size of the placeholder font in the input

::-webkit-input-placeholder{ font-size:10pt;}
17. The wap page has an img tag, remember to add the display: block; attribute to solve the 1px margin of the img gap pixel. If the image needs to adapt to different mobile phones, set width: 100%; and cannot add height.



18. How to clear the shadow inside the input box on the mobile terminal

On iOS, the input box has an inner shadow by default, but it cannot be cleared with box-shadow. If you don’t need the shadow, you can turn it off like this:

input,
textarea {
border: 0;
-webkit-appearance: none;
}
19. Disable content selection on mobile

If you don't want users to be able to select content on the page, you can disable it in css:

.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
Compatible with IE6-9 writing: onselectstart="return false;" unselectable="on"



20.audio Elements and video elements cannot be played automatically in ios and andriod

. Solution: touch the screen to play

$('html').one('touchstart',function(){
audio.play()
})


21. Take pictures and upload pictures on the mobile phone

accept attribute of <input type="file">

<!-- select photo-->

<input type=file accept="image/*">
<!-- select video-->

< input type=file accept="video/*">
ios has the functions of taking photos, videos, and selecting local images.

Some androids only have the function of selecting local images.

Winphone does not support the

default appearance of input controls .



22. Eliminate transition splash

screen.css{
-webkit-transform-style: preserve-3d;
-webkit-backface- visibility: hidden;
}
23. Turn on hardware acceleration to solve page flashing and ensure smooth animation .

css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms -transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
Several elements for designing high-performance CSS3 animations Use synthetic properties transform and opacity to design CSS3 animations

as much as possible ,

not position Use the left and top to locate the GPU acceleration

using translate3D

**************************************** ************************************

Framework

1. The basic framework of mobile terminal

zepto.js syntax is almost the same as jquery, and jquery will basically know zepto~

iscroll.js Solve the problem caused by the page does not support elastic scrolling and does not support fixed ~ Implement pull-down refresh, sliding screen, zoom and other functions ~

underscore .js This library provides a full set of functional programming utilities, but does not extend any JavaScript built-in objects.

fastclick to speed up the click response time on the mobile

side The effect of screen switching pages slip.js iSlider.js fullpage.js swiper 3. The waterfall flow framework masonry tool recommends caniuse Each browser supports html5 attribute query paletton color matching For website font settings Mobile project: font-family:Tahoma,Arial ,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self; mobile and pc projects:







































font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;


some properties about flexbox layout

Horizontal and vertical centering of variable width and

height.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%，-50%);
border-radius: 6px;
background:#fff;
}


[flexbox version] Horizontal and vertical centering of variable width and height.xx

{
justify-content:center;//The child element is centered horizontally,
align-items:center;//The child element is centered vertically;
display: -webkit-flex;
}
//Single-line text overflow.xx

{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}


Multi-line text overflow

.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(number 2 means hide two lines)
}


Use fluid image

img{
width:100%;
height:auto;
width:auto\9;
}
One pixel border (example: bottom border of mobile list)

.list-iteam:after{
position: absolute;
left: 0px;
right: 0px;
content: '';
height: 1px;
transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-webkit-transform:scaleY(0.5);

}


for adaptation Proportional scaling method:

@media only screen and (min-width: 1024px){
body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;}
}