Integration of mobile WEB Front-end development resources and web resources

(Reprinted) Integration of mobile WEB Front-end development resources and web resources

Add it to favorites. Thanks to the original article: Bon ~~~

Link: http://www.ccwebsite.com/development-of-resource-integration-in-mobile-terminal/

----------------------------------

Meta 1. Window width

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

Wherewidth=device-widthIs to set the window width to the device window width, can also be fixed width, for example:width=640Is the width of 640px (common );

initial-scale=1.0: Set the scaling ratio to 1.0;

minimum-scale=1.0Andmaximum-scale=1.0: Min scaling ratio and Max scaling ratio;

user-scalable=no: Prohibit users from scaling freely,user-scalableThe default value isyes.

Tip: the one that just came with all the parameters is usually used.user-scalable=noNo need to useminimum-scale=1.0Andmaximum-scale=1.0To forcibly disable scaling.

<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"/>

contentParameters:telephone=noProhibit the browser from automatically recognizing the mobile phone number,email=noThe browser is prohibited 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

Body {font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;/* use unlined fonts */} a, img {-webkit-touch-callout: none;/* prohibit long-pressed links and image pop-up menu */} html, body {-webkit-user-select: none;/* prohibit selected text */user-select: none;} button, input, optgroup, select, textarea {-webkit-appearance: none;/* remove the default webkit form style */} a, button, input, optgroup, select, textarea {-webkit-tap-highlight-color: rgba (,);/* remove the blue outer border and gray when a, input, and button are clicked Color translucent background */} input:-webkit-input-placeholder {color: # ccc;/* modify the planceholder style of input in webkit */} input: focus :: -webkit-input-placeholder {color: # f00;/* modify the planceholder style of input in the focus state in webkit */} body {-webkit-text-size-adjust: 100%! Important;/* disable IOS to adjust the font size */} input:-webkit-input-speech-button {display: none;/* Hide the voice input button of Android */}

Flex Basics

Assume that the flex container is.boxThe child element is.item.

1. Define the container as a flex Layout

. Box {display:-webkit-flex;/* webkit */display: flex;}/* intra-row flex */. box {display:-webkit-inline-flex;/* webkit */display: inline-flex ;}

2. Container Style

. Box {flex-direction: row | row-reverse | column-reverse;/* spindle direction: Left to right (default) | right to left | up to bottom | down to top */flex-wrap: nowrap | wrap-reverse;/* line feed: no line feed (default) | line feed with the first line at the bottom */flex-flow: <flex-direction >||< flex-wrap>; /* abbreviated spindle direction and line feed */justify-content: flex-start | flex-end | center | space-between | space-around;/* spindle alignment: left alignment (default) | right alignment | center alignment | align-items: flex-start | flex-end | center | baseline | stretch; /* cross-axis alignment: Top alignment (default) | bottom alignment | center alignment | up/down align-content: flex-start | flex-end | center | space-between | space-around | stretch;/* multi-spindle alignment: Top alignment (default) | bottom alignment | center alignment | up/down alignment and fill up | up/down evenly distributed */}

3. Child element style

. Item {order: <integer>;/* sorting: the smaller the value, the default value is 0 */flex-grow: <number>; /* default 0 * // * zoom in: The default value is 0 (that is, if there is any remaining space, do not zoom in, the value is 1, 2 is double the size of 1, and so on) */flex-shrink: <number>;/* default 1 * // *: The default value is 1. (If the space is insufficient, the default value is 0) */flex-basis: <length> | auto;/* default auto * // * fixed size: the default value is 0, and the px value can be set, you can also set the percentage size */flex: none | [<'flex-grow'> <'flex-shrink '>? | <'Flex-basis '>]/* abbreviation of flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto, */align-self: auto | flex-start | flex-end | center | baseline | stretch;/* separate alignment mode: Automatic (default) | top alignment | bottom alignment | center alignment | top/bottom alignment and full alignment | text baseline alignment */}

Tips 1. Customize the apple icon

Putapple-touch-icon.pngFile. This file is used as an icon when the website is saved as a bookmarks or desktop shortcut on an Apple device. The recommended file size is 180px × 180px.

2. Customize 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 a text message: 10086 </a> <a href = "mailto: me@22278.club"> send mail: me@22278.club </a>

4. Define the upload file type and format

<input type=file accept="image/*">

In the above File Upload box,acceptYou can restrict the type of the file to be uploaded. The parameter isimage/*All image types. You can specify the image format and set the parameterimage/pngYou can set the image type to png.video/*It means to select a video;acceptYou can also set multiple file formats. The syntax isaccept="image/gif, image/jpeg";

5. Use box-shadow to change (Block) The automatically filled yellow color of the form

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{box-shadow:inset 0 0 0 1000px #fff;}

6. Use CSS to perform ellipsis text Truncation

white-space: nowrap;text-overflow: ellipsis;overflow: hidden;

7. Use border to draw a small triangle

The principle is: connecting up and down to the left and right sides of the border is actually a diagonal line. Using this feature, the border on one side is transparent, and the border on the other side is written as the desired color and the opposite side is hidden, it can be changed to a small arrow shape.

Border-width: 10px 10px 0; // left arrow border-color: transparent # fff; border-style: solid; width: 0;

Tootip:

<! -- Html --> <div class = "box"> Hi! Click the menu and you will be able to follow the Dixie 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: "";}