What to consider and how to summarize in the mobile page layout

Mobile Web page layout needs attention and a summary of the solution, this is very useful for us in the layout of mobile Web pages!

Winphone system A, input tag generated when clicked on a translucent gray background how to remove
<meta name= "Msapplication-tap-highlight" content= "no" >
1. Turn off auto-capitalization of iOS keyboard first letter
<input type= "text" autocapitalize= "Off"/>
2. Prohibit text scaling
HTML {
-webkit-text-size-adjust:100%;
}
3. How to clear the shadow in the input box on the mobile side
On iOS, the input box defaults to an inner shadow, but cannot be cleared using Box-shadow, which can be turned off if no shadow is needed:
Input
TEXTAREA {
border:0;
-webkit-appearance:none;
}
4, ignore the number of pages for the phone, ignoring email identification
<meta name= "format-detection" content= "Telephone=no, Email=no"/>
5. Fast Rebound scrolling
. xxx {
Overflow:auto;
-webkit-overflow-scrolling:touch;
}
Ps:iscroll used to feel not very good, there are some strange bugs, here is recommended another Idangero Swiper, this plug-in integrates the powerful function of sliding screen scrolling (support 3D), but also has a rebound scrolling built-in scroll bar, the official address:
http://www.idangero.us/sliders/swiper/index.php
6. Disable selection on the mobile side
div {
-webkit-user-select:none;
}
7. Remove touch highlighting from the mobile side
When you do the mobile page, you will find all a tags in the trigger click or all set Pseudo-class: Active elements, the default will be in the active state, the display of the Highlight box, if you do not want this highlight, then you can use the following CSS methods to suppress:
. xxx {
-webkit-tap-highlight-color:rgba (0, 0, 0, 0);
}
8. How to prohibit saving or copying images
Usually when you press and hold the image img on your phone or pad, the option to store the image or copy the image will pop up, and if you don't want the user to do so, you can disable it in the following ways:
IMG {
-webkit-touch-callout:none;
}
PS: It is important to note that this method is only valid on IOS.
9. Solve the problem that the font appears jagged after the mobile end is scaled down:
-webkit-font-smoothing:antialiased;
10. Grid layout:
Box-sizing:border-box; You can change the way the box model is calculated to make it easier for you to set the width for an adaptive streaming layout
11, Input[type=input]{-webkit-appearance:none;} Remove the iOS style, but this property has a bug that will cause the ISO to not get the checkbox value and re-assign the Input[type=checkbox]{-webkit-appearance:checkbox to this element;} Will not be an error.
12, the button is pressed the implementation of the effect needs to add a a:active attribute to a tag and adding an empty function
Document.body.addEventListener (' Touchend ', function () {});
13,-webkit-border-bottom:none; remove the bottom border.

14, the English text wraps (does not divide the word) Word-wrap:break-word;
15, the font size as far as possible using PT or Em,rem, instead of PX.
16. Set the size of the placeholder font in input

::-webkit-input-placeholder{font-size:10pt;}
17, WAP page has an IMG tag, remember to add display:block; attributes to address the 1px pixels of an img's margin gap. If the picture is to be adapted to a different phone, set the width:100% and cannot add a height.

=======================================================
18. How to clear the input in-box shadow
on iOS, the input box defaults to an inner shadow, but cannot be used Box-shadow to clear, if no shadow is required, this can be closed:
Input,
textarea {
border:0;
-webkit-appearance:none;
}
19. Disable selection on mobile
If you don't want the user to be able to select the content on the page, you can disable it in the CSS:
. user-select-none {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}
Compatible with ie6-9: onselectstart= "return false;" unselectable= "on"
20.audio elements and video elements do not automatically play in iOS and Andriod
WORKAROUND: The touchscreen will broadcast
$ (' html '). One (' Touchstart ', function () {
Audio.play ()
})
21. Mobile photos and upload images
<input type= " File > 's Accept Property
<!--select photo-->
<input type=file accept= "image/*";
<!--select video-->
< Input Type=file accept= "video/*";

iOS has photos, videos, and local image selection features
Some Android only choose local picture function
Winphone not supported
The input control looks ugly by default
22. Eliminate Transition splash screen
. css{

-webkit-transform-style:preserve-3d;

-webkit-backface-visibility:hidden;
}
23.
Turn on hardware acceleration
Resolve page Flash White
Keep your animations flowing
. 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 of designing high-performance CSS3 animations
Use synthetic attributes transform and opacity as much as possible to design CSS3 animations,
Use position left and top to locate
Using Translate3d to turn on GPU acceleration

**************************************************************************
Framework
1. Mobile-based framework
Zepto.js syntax is almost the same as jquery, and jquery will basically zepto~
Iscroll.js solve the page does not support elastic scrolling, does not support fixed problems ~ To achieve pull-down refresh, slide screen, zoom and other functions ~
Underscore.js The library provides a full set of functional programming functions, but does not extend any JavaScript built-in objects.
Fastclick speed up Mobile-click Response time
Animate.css CSS3 Animation Effect Gallery
Normalize.css Normalize.css is a modern, CSS reset for HTML5 ready for a premium alternative
2. Sliding screen Frame
Suitable for sliding screen on the slide screen, left and right slide screen to switch page effect
Slip.js
Islider.js
Fullpage.js
Swiper
3. Waterfall Flow Framework
Masonry
Tools recommended
Caniuse each browser supports HTML5 property query
Paletton Color Matching
=========================================================================
For site font settings
Mobile-side projects:
Font-family:tahoma,arial,roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;
Mobile and PC-side 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 flexible box layouts
Horizontal vertical centering of indefinite 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 vertical center of indefinite width and height
. xx{
justify-content:center;//Sub-elements are centered horizontally,
align-items:center;//Sub-elements are vertically centered;
Display:-webkit-flex;
}
Single-line text overflow
. xx{
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
}
Multiple lines of 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 rows)
}
Using a fluid picture
img{
width:100%;
Height:auto;
width:auto\9;
}
One-pixel border (example: bottom border of the 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);
Background-color: #e3e3e3;
}
Methods for adapting to equal ratio scaling:
@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;}
}

Reprinted from: http://www.cnblogs.com/chern2468/p/5481616.html

What to consider and how to summarize in the mobile page layout