``` Where `width=device-width` sets the viewport width to the device's viewport"> ``` Where `width=device-width` sets the viewport width to the device's viewport" />
Easy Tutorial
❮ Prints Diamonds Triangles Rectangles Android Tutorial Alarmmanager ❯

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

&lt;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

Cancel

-

-

-

❮ Prints Diamonds Triangles Rectangles Android Tutorial Alarmmanager ❯