移动端web头部header通用写法_PHP教程-php教程-PHP中文網

移动端web头部header通用写法

首頁

後端開發

php教程

移动端web头部header通用写法_PHP教程

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 12, 2016 am 08:54 AM

android

1.head部分通用写法；网上也有，不过有的可有有的可无；原理是兼容IOS透明栏目等问题，再者就是viewport（关键）

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

登入後複製

2.引入引用flexible.js；这是淘宝的兼容解决方案，最大到5.5寸；用的时候把viewport去掉，flexible.js会动态添加；
主要讲一下用法，网上的讲的太细却使很多网友没懂；flexible.js只有4K，作用是：
1.动态改写标签
2.给元素添加 data-dpr 属性，并且动态改写 data-dpr 的值
3.给元素添加 font-size 属性，并且动态改写 font-size 的值
接下来就可以用了，若你的图示640的就设置1rem=64px如果是750的就设置1rem=75px；比如320X240的banner，那么就换算成5remX3.75rem(640为例)
下载地址http://www.w3cfuns.com/misc.php?mod=attach&genre=file&aid=1cec8fecbbaf2bf347f2a749486a6525

参考博文：http://www.w3cfuns.com/notes/20813/fecbb840a2574cf712a8625f88a7ab3a.html

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7807

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

新報告對傳聞中的三星 Galaxy S25、Galaxy S25 Plus 和 Galaxy S25 Ultra 相機升級進行了嚴厲的評估 Sep 12, 2024 pm 12:23 PM

最近幾天，Ice Universe 不斷披露有關 Galaxy S25 Ultra 的詳細信息，人們普遍認為這款手機將是三星的下一款旗艦智慧型手機。除此之外，洩密者聲稱三星只計劃升級一台相機

三星 Galaxy S25 Ultra 洩漏了第一張渲染圖，傳聞中的設計變化被曝光 Sep 11, 2024 am 06:37 AM

OnLeaks 現在與 Android Headlines 合作，首次展示了 Galaxy S25 Ultra，幾天前，他試圖從他的 X（以前的 Twitter）粉絲那裡籌集到 4,000 美元以上的資金，但失敗了。對於上下文，嵌入在 h 下面的渲染圖像

IFA 2024 | TCL 的 NXTPAPER 14 在性能上無法與 Galaxy Tab S10 Ultra 相媲美，但在尺寸上幾乎可以與之媲美 Sep 07, 2024 am 06:35 AM

除了發布兩款新智慧型手機外，TCL 還發布了一款名為 NXTPAPER 14 的新 Android 平板電腦，其大螢幕尺寸是其賣點之一。 NXTPAPER 14 採用 TCL 標誌性品牌霧面液晶面板 3.0 版本

Vivo Y300 Pro 在 7.69 毫米纖薄機身中配備 6,500 mAh 電池 Sep 07, 2024 am 06:39 AM

Vivo Y300 Pro剛剛全面亮相，它是最薄的中階Android手機之一，配備大電池。準確來說，這款智慧型手機厚度僅為 7.69 毫米，但配備 6,500 mAh 電池。這與最近推出的容量相同

三星 Galaxy S24 FE 預計將以低於預期的價格推出，有四種顏色和兩種記憶體選項 Sep 12, 2024 pm 09:21 PM

三星尚未就何時更新其 Fan Edition (FE) 智慧型手機系列提供任何提示。目前來看，Galaxy S23 FE 仍然是該公司的最新版本，於 2023 年 10 月年初推出。

新報告對傳聞中的三星 Galaxy S25、Galaxy S25 Plus 和 Galaxy S25 Ultra 相機升級進行了嚴厲的評估 Sep 12, 2024 pm 12:22 PM

小米紅米 Note 14 Pro Plus 上市，成為首款配備 Light Hunter 800 相機的高通 Snapdragon 7s Gen 3 智慧型手機 Sep 27, 2024 am 06:23 AM

Redmi Note 14 Pro Plus 現已正式成為去年 Redmi Note 13 Pro Plus 的直接後繼產品（亞馬遜售價 375 美元）。正如預期的那樣，Redmi Note 14 Pro Plus與Redmi Note 14和Redmi Note 14 Pro一起成為Redmi Note 14系列的主角。李