Mobile Web Front-End Development Resource Integration
Category Programming Technology
Meta Section
1. Viewport Width
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
Where width=device-width
sets the viewport width to the device's viewport width, it can also be fixed, for example: width=640
sets the width to 640px (commonly used in WeChat);
initial-scale=1.0
: Sets the zoom scale to 1.0;
minimum-scale=1.0
and maximum-scale=1.0
: Minimum and maximum zoom scales;
user-scalable=no
: Disables user free zooming, user-scalable
default value is yes
.
Tip: The above is with all parameters, usually, if user-scalable=no
is used, there is no need to use minimum-scale=1.0
and maximum-scale=1.0
to force disable zooming.
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
2. Automatic Format Recognition
<meta name="format-detection" content="telephone=no"/>
Parameters in content
: telephone=no
disables the browser from automatically recognizing phone numbers, email=no
disables the browser from automatically recognizing emails.
3. Complete Template
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="format-detection" content="email=no"/>
CSS Section
body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*Use sans-serif fonts*/
}
a, img {
-webkit-touch-callout: none; /*Disable long-press menu for links and images*/
}
html, body {
-webkit-user-select: none; /*Disable text selection*/
user-select: none;
}
button,input,optgroup,select,textarea {
-webkit-appearance:none; /*Remove default form styles*/
}
a,button,input,optgroup,select,textarea {
-webkit-tap-highlight-color:rgba(0,0,0,0); /*Remove blue border and gray semi-transparent background on tap*/
}
input::-webkit-input-placeholder {
color:#ccc; /*Modify placeholder style in WebKit*/
}
input:focus::-webkit-input-placeholder {
color:#f00; /*Modify placeholder style in WebKit when focused*/
}
body {
-webkit-text-size-adjust: 100%!important; /*Disable iOS font size adjustment*/
}
input::-webkit-input-speech-button {
display: none; /*Hide voice input button on Android*/
}
Flex Basics Section
Assume the flex container is .box
and the child elements are .item
.
1. Define Container as Flex Layout
.box{
display: -webkit-flex; /*webkit*/
display: flex;
}
/*Inline flex*/
.box{
display: -webkit-inline-flex; /*webkit*/
display:inline-flex;
}
2. Container Styles
.box{
flex-direction: row | row-reverse | column | column-reverse;
/*Main axis direction: left to right (default) | right to left | top to bottom | bottom to top*/
flex-wrap: nowrap | wrap | wrap-reverse;
/*Wrapping: no wrap (default) | wrap | wrap and first line at bottom*/
flex-flow: <flex-direction> || <flex-wrap>;
/*Shorthand for main axis direction and wrapping*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/*Main axis alignment: left (default) | right | center | space between | space around*/
align-items: flex-start | flex-end | center | baseline | stretch;
/*Cross axis alignment: top (default) | bottom | center | stretch | baseline*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
/*Multi-main axis alignment: top (default) | bottom | center | stretch | space between | space around*/
}
3. Child Element Styles
.item{
order: <integer>;
/*Order: smaller values, front; default is 0*/
flex-grow: <number>; /* default 0 */
/*Grow: default 0 (no grow if space available, 1 to grow, 2 is double, etc.)*/
flex-shrink: <number>; /* default 1 */
/*Shrink: default 1 (shrink if space insufficient, 0 to not shrink)*/
flex-basis: <length> | auto; /* default auto */
/*Fixed size: default 0, can set px or percentage*/
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
/*Shorthand for flex-grow, flex-shrink, and flex-basis, default 0 1 auto*/
align-self: auto | flex-start | flex-end | center | baseline | stretch;
/*Individual alignment: auto (default) | top | bottom | center | stretch | baseline*/
}
Tips Section
1. Custom Apple Icon
Place an apple-touch-icon.png
file in the root directory of the website. Apple devices use this file as an icon when saving the website as a bookmark or shortcut on the desktop. Recommended size: 180px × 180px.
2. Custom Favicon
<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
3. Define Browser Click Behavior
<a href="tel:020-10086">Call: 020-10086</a>
<a href="sms:10086">Send SMS to: 10086</a>
<a href="mailto:[email protected]">Send Email to: [email protected]</a>
4. Define Upload File Types and Formats
<input type=file accept="image/*">
In the file upload box above, accept
can limit the types of files that can be uploaded. The parameter image/*
allows all image types, clicking will open the photo library. You can also specify image formats, e.g., image/png
limits the image type to png. The parameter video/*
allows video selection. accept
can also set multiple file formats, syntax: accept="image/gif, image/jpeg"
.
5. Use box-shadow
to Change (Cover) Yellow Form Auto-fill
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
box-shadow:inset 0 0 0 1000px #fff;
}
6. CSS Ellipsis Text Truncation
white-space: nowrap;
text-overflow: ellipsis;
7. Use Border to Draw Small Triangles
The principle is: the connection of top and bottom and left and right borders is a diagonal. Using this feature, making one side's border transparent and the other side the desired color while hiding the opposite side can form a small arrow shape.
border-width: 10px 10px 10px 0; //Left arrow
border-color: transparent #fff;
border-style: solid;
width: 0;
Tooltip Writing:
<!--html-->
<div class="box">Hey! Click the menu to follow Xixi's public account~</div>
/*--css--*/
.box{
position: relative;
padding: 0 20px;
width: 380px;
height: 80px;
border-radius: 8px;
background: #efefef;
font-size: 18px;
line-height: 80px;
}
.box:after{
position: absolute;
top: 50%;
left: -15px;
z-index: 1;
display: block;
margin-top: -15px;
width: 0;
border-color: transparent #efefef;
border-style: solid;
border-width: 15px 15px 15px 0;
content: "";
}
>
Article Source: Mobile Web Front-End Development Resource Integration - XixiCreative Commons 3.0 License ) Please indicate the source for reprinting
** Click to Share Notes
-
-
-