Common writing methods for mobile web headers_PHP tutorial-PHP Tutorial-php.cn

Common writing methods for mobile web headers_PHP tutorial

WBOY

Release： 2016-07-12 08:54:45

Original

1377 people have browsed it

Common writing method for mobile web header header

1. Common writing method for head part; it is also available online, but some are optional; the principle is to be compatible with issues such as IOS transparent columns, and then The one is viewport (key)

<ol style="margin:0 1px 0 0px;padding-left:40px;" start="1" class="dp-css"><li><head lang="en"><br /></li><li><meta charset="UTF-8"><br /></li><li><br /></li><li><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><br /></li><li><br /></li><li><meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-title" content=""><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-capable" content="yes"/><br /></li><li><br /></li><li><meta name="apple-mobile-web-app-status-bar-style" content="black"/><br /></li><li><br /></li><li><meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"><br /></li><li><br /></li><li><meta name="format-detection" content="telphone=no, email=no"/><br /></li><li><br /></li><li><meta http-equiv="Pragma" content="no-cache"><br /></li><li><meta http-equiv="Cache-Control" content="no-cache"><br /></li><li><meta http-equiv="Expires" content="0"><br /></li><li><title>web前端-马乐</title><br /></li><li></head></li></ol>

Copy after login

2. Introduce the reference flexible.js; this is Taobao’s compatible solution, up to 5.5 inches; remove the viewport when using it, flexible .js will be added dynamically;
mainly talks about usage, but the online explanation is too detailed and many netizens don’t understand it; flexible.js is only 4K, and its functions are:
1. Dynamically rewrite the tag
2. Add the data-dpr attribute to the element, and dynamically rewrite the value of data-dpr
3. Add the font-size attribute to the element, and dynamically rewrite the value of font-size
Next It’s ready to use. If your icon is 640, set 1rem=64px. If it’s 750, set 1rem=75px; for example, for a 320X240 banner, convert it to 5remX3.75rem (640 as an example)
Download address http ://www.w3cfuns.com/misc.php?mod=attach&genre=file&aid=1cec8fecbbaf2bf347f2a749486a6525

Reference blog post: http://www.w3cfuns.com/notes/20813/fecbb840a2574cf712a8625f88a7ab3a. html