Mobile Development Memo

This is a memo record for some mobile developers. <Meta>Elements<Metaname= "Viewport"content= "Width=device-width,Initial-scale=1.0,maximum-scale=1.0,user-scalable=no "/>width: widths (values/device-width) (range from 200 to 10,000, default to 980 pixels) Height: altitude (Value/device-height) (range from 223 to Initial-scale): Initial scaling (range from >0 to ten) Minimum-scale: The minimum scale that allows the user to zoom to Maximum-scale: The maximum scale to allow the user to zoom user-scalable: whether the user can manually indent (no,yes) WebApp full Screen mode: Camouflage app, offline app. <Metaname= "Apple-mobile-web-app-capable"content= "Yes"/> <!– Enable WEBAPP Full Screen mode –>Hide Status bar/Set status bar color: Only takes effect when webapp full screen mode is turned on. The content value is default | Black | Black-translucent. <Metaname= "Apple-mobile-web-app-status-bar-style"content= "Black-translucent"/>ignore numbers automatically recognized as phone numbers<Metacontent= "Telephone=no"name= "Format-detection"/>Ignore recognition Mailboxes<Metacontent= "Email=no"name= "Format-detection"/>Add Smart App banner Smart app Banner: Tell the browser the app that corresponds to this website and display the download Banner (for example) on the page. Reference Documents<Metaname= "Apple-itunes-app"content= "App-id=myappstoreid,Affiliate-data=myaffiliatedata,app-argument=myurl ">other<!– Optimized for handheld devices, primarily for older browsers that do not recognize viewport, such as BlackBerry –>  <Metaname= "handheldfriendly"content= "true">  <!– Microsoft's old-fashioned browser –>  <Metaname= "Mobileoptimized"content= " the">  <!–UC Force Vertical Screen –>  <Metaname= "Screen-orientation"content= "Portrait">  <!–QQ Force Vertical Screen –>  <Metaname= "X5-orientation"content= "Portrait">  <!–uc Force full Screen –>  <Metaname= "Full-screen"content= "Yes">  <!–qq Force full Screen –>  <Metaname= "X5-fullscreen"content= "true">  <!–UC Application Mode –>  <Metaname= "Browsermode"content= "Application">  <!–QQ Application Mode –>  <Metaname= "X5-page-mode"content= "App">  <!– Windows Phone Click No Highlight –>  <Metaname= "Msapplication-tap-highlight"content= "No">REM units, which can be set according to the HTML reference value//1rem = 10px html {font-size:62.5%;} or by JS to calculate 0.0625* (640<=document. Documentelement.clientwidth?640:document.documentelement.clientwidth) + "px" JS event attribute e.changedtouches[0]; Some devices on the Android side do not trigger Touchend event resolution: Document.ontouchmove= function (ev) {Ev.preventdefault (); The media query medium query//browser width is less than or equal to 320 when @media screen and (max-width:320px) {body{}} Flex layout, due to the relationship between the old and new properties, some of the lower versions are not supported, need full      The department writes out, basically can be compatible with all. Page-wrap {display:-webkit-box;         /* Old–ios 6-, Safari 3.1-6 */display:-moz-box;      /* Old–firefox 19-(buggy but mostly works) */display:-ms-flexbox;     /* Tweener–ie */display:-webkit-flex;             /* New–chrome */Display:flex;      /* NEW, Spec–opera 12.1, Firefox 20+ */}. main-sidebar {-webkit-box-flex:1;         /* Old–ios 6-, Safari 3.1-6 */-moz-box-flex:1;          /* Old–firefox 19-*/-webkit-flex:1;              /* Chrome */-ms-flex:1;                  /* IE ten */flex:1;      /* NEW, Spec–opera 12.1, Firefox 20+ */} change the color of placeholder::-webkit-input-placeholder {/* webkit browsers */  Color: #999;  }::-moz-placeholder {/* Mozilla Firefox 19+ */color: #999; }:-ms-input-placeholder {/* Internet ExPlorer + * * Color: #999; } Safari settings in iOS save to Desktop icon: <link rel= "Apple-touch-icon"href= "Custom_icon.png">the appearance of the clicked element changes, such as a tag, when clicked, there will be a circle of color, see the following demo (with the mobile phone side view), the first without the style, click will appear black background, the second add the style is not:-webkit-tap-highlight-color:  RGBA (0,0,0,0) Click I then click My Input,button Default Style clear, in the mobile side, these are all default with style, some fillet, shadow, plus the following code can be-webkit-appearance:none; Active bug, sometimes we need to click on an element to change its own transparency, or color, these interactions are common, can be used: active to complete, but some phones do not work,  Need to add a section of Js:document.body.addEventListener (' Touchstart ', function () {},false);  To overflow:auto the scroll bar, add the fast sliding effect-webkit-overflow-scrolling:touch;  How to prevent users from saving pictures \ Copying pictures in iOS-webkit-touch-callout:none penetrate absolutely positioned elements to trigger certain behavior pointer-events:none of the following elements; 

Mobile Development Memo