First, meta tag related knowledge
1. The mobile page sets the viewport width equal to the device width and disables zooming.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
2, mobile page set viewport width equal to fixed width (such as 640px), and prohibit scaling, often used in browser pages.
<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
3. Prohibit the identification of numbers in the page as phone numbers
<meta name="format-detection" content="telephone=no" />
4. Ignore the recognition of email address in Android platform
<meta name="format-detection" content="email=no" />
5. When the site is added to the home screen Quick Start mode, you can hide the address bar, only for iOS safari
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 -->
6. Add website to home screen Quick Start mode, only for iOS Safari top status bar style
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->
Viewport templates
<!DOCTYPE html>
Second,CSS style tips
1. Disable the selection of text for iOS and Android users
.css{-webkit-user-select:none}
2, prohibit iOS long-time trigger system menu, prohibit ios&android long time to download pictures
.css{-webkit-touch-callout: none}
3. WebKit Remove the default style for form elements
.css{-webkit-appearance:none;}
4. Modify the style of the WebKit form input box placeholder
input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}
5. Remove the borders generated when Android A/button/input tags are clicked & Remove the translucent gray background generated when the iOS a tag is clicked
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}
6. iOS use-webkit-text-size-adjust to disable font resizing
body{-webkit-text-size-adjust: 100%!important;}
7. Remove the Voice input button on Android
input::-webkit-input-speech-button {display: none}
8, mobile-defined font, mobile no Microsoft ya Black font
/* Code to define the font for the mobile side * /
body{font-family:Helvetica;}
Third, other skills
1, mobile phone photos and upload pictures
<!--Select Photos--
<input type=file accept="image/*">
<!--Select Video--
<input type=file accept="video/*">
2. Cancel input under iOS, enter the default capitalization of the initials in English
<input autocapitalize="off" autocorrect="off" />
3. Call and send text messages
<a href="tel:0755-10086">打电话给:0755-10086</a><a href="sms:10086">发短信给: 10086</a>
Four, CSS reset
/* Hcysun */@charset "utf-8";/* Reset */html{-webkit-text-size-adjust:none;-webkit-user-select:none;- Webkit-touch-callout:nonefont-family:helvetica;} body{font-size:12px;} body,h1,h2,h3,h4,h5,h6,p,dl,dd,ul,ol,pre,form,input,textarea,th,td,select{margin:0; padding:0; Font-weight: normal;text-indent:0;} a,button,input,textarea,select{Background:none;-webkit-tap-highlight-color:rgba (255,0,0,0); outline:none;- Webkit-appearance:none;} Em{font-style:normal}li{list-style:none}a{text-decoration:none;} Img{border:none; vertical-align:top;} Table{border-collapse:collapse;} textarea{resize:none; overflow:auto;} /* End Reset */
v. Common Common CSS style
/* Public *//* Clear floating */.clear {zoom:1;}. Clear:after {content: '; display:block; clear:both;} /* Define box models for quirks and models (wide height not affected by borders) */.boxsiz{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing: Border-box;-o-box-sizing:border-box;box-sizing:border-box;} /* Force line */.towrap{word-break:break-all;/* only works in English, with letters as the basis for line breaks. */word-wrap:break-word; /* only works in English, with words as the basis for line change. */white-space:pre-wrap; /* Only works on Chinese, forcing line break. */}/* no newline */.nowrap{white-space:nowrap;} /* No line break, out of ellipsis */.nowrapellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} /* text justify */.text-justify{text-align:justify;text-justify:inter-ideograph;} /* Define the box model to be compatible with flex layouts and allow content to be centered horizontally vertically */.flex-center{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:- O-box;display:box;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;-o-box-pack:center; Box-pack:center;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-o-box-align:center; Box-align:center;} /* Public End */
VI. Flex Layout
1, the definition of flexible box model compatible wording
/*boxinline-box*/display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -o-box;display: box;
2. Box-orient define the layout direction of the telescopic project within the box model
/*** vertical column 垂直* horizontal row 水平 默认值*/-webkit-box-orient: horizontal;-moz-box-orient: horizontal;-ms-flex-direction: row;-o-box-orient: horizontal;box-orient: horizontal;
3. Box-direction define the positive sequence (normal default) and flashback (reverse) of the telescopic project within the box model
/* Firefox */display:-moz-box;-moz-box-direction:reverse;/* Safari、Opera 以及 Chrome */display:-webkit-box;-webkit-box-direction:reverse;
4, Box-pack on the management of the box level of rich space
/*startendcenterjustify*/-webkit-box-pack: center;-moz-box-pack: center;-ms-flex-pack: center;-o-box-pack: center;box-pack: center;
5, Box-pack to the box vertical direction of the rich space management
/*startendcenter*//* box-align */-webkit-box-align: center;-moz-box-align: center;-ms-flex-align: center;-o-box-align: center;box-align: center;
6, define the specific location of the telescopic project
/*-moz-box-ordinal-group:1;*/ /* Firefox *//*-webkit-box-ordinal-group:1;*/ /* Safari 和 Chrome */.box div:nth-of-type(1){-webkit-box-ordinal-group:1;}.box div:nth-of-type(2){-webkit-box-ordinal-group:2;}.box div:nth-of-type(3){-webkit-box-ordinal-group:3;}.box div:nth-of-type(4){-webkit-box-ordinal-group:4;}.box div:nth-of-type(5){-webkit-box-ordinal-group:5;}
7. Define the number of parts of the telescopic project that occupy space
-moz-box-flex:2.0; /* Firefox */-webkit-box-flex:2.0; /* Safari 和 Chrome */.box div:nth-of-type(1){-webkit-box-flex:1;}.box div:nth-of-type(2){-webkit-box-flex:2;}.box div:nth-of-type(3){-webkit-box-flex:3;}.box div:nth-of-type(4){-webkit-box-flex:4;}.box div:nth-of-type(5){-webkit-box-flex:5;}
Move the front end some reset style templates and tags getting started
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
