Mobile-side layout considerations and Solutions

How to remove the translucent gray background when 1.winphone system A, input tag is clicked

<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;} To remove the iOS style, but there is a bug in this property, which causes the ISO to fail to get the checkbox value and re-assign the Input[type=checkbox]{-webkit-appearance:checkbox to the 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. Remove the bottom border:

-webkit-border-bottom:none;

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 the mobile side clears the shadow in the input box

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;
}
19. Disable selection on the mobile side

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 notation: onselectstart= "return false;" unselectable= "on"



20.audio elements and video elements do not play automatically in iOS and Andriod

Solution: Touch screen is broadcast

$ (' HTML '). One (' Touchstart ', function () {
Audio.play ()
})


21. Mobile photos and upload pictures

<input type= "File" > 's Accept Property

<!--Select Photos--

<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 to resolve page flash white to 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 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);

}


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;}
}

Mobile-side layout considerations and Solutions