content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计?
content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计? 竟然也可以达到自适应的布局在手机上面
咱们不都是通常viewport content="width=device-width么 那么上面这种有没有什么坑呢 ,那么以后我是t content="width=device-width css3媒体查询 还是用content"width=640,user-scalable=no"这样的方法呢 我需要兼容手机浏览器和apk的webview
回复内容:
結論:content"width=640,user-scalable=no" 是一個很好的解決方案,荔枝FM,人人都是播客的移動站使用的就是此方案固定宽度,viewport 缩放(轉自MobileWeb 适配总结) 别的不多说了,强烈建议看看前几天刚写的一篇文章:使用Flexible实现手淘H5页面的终端适配 应该能让你找到需要的答案 你在用的可能是:视觉稿、页面宽度、viewport width 使用统一宽度,利用浏览器自身缩放完成适配。页面样式(包括图像元素)完全按照视觉稿的尺寸,使用定值单位 (px、em)即可完成。
优点:存在的问题:
- 开发简单 缩放交给浏览器,完全按视觉稿切图。
- 还原精准 绝对等比例缩放,可以精准还原视觉稿(不考虑清晰度的情况下)。
- 测试方便 在PC端即可完成大部分测试,手机端只需酌情调整一些细节(比如图标、字体混合排列时,因为字体不同造成的对齐问题)。
- 像素丢失 对于一些分辨率较低的手机,可能设备像素还未达到指定的 viewport 宽度,此时屏幕的渲染可能就不准确了。比较常见的是边框“消失”了,不过随着手机硬件的更新,这个问题会越来越少的。
- 缩放失效 某些安卓机不能正常的根据 meta 标签中 width 的值来缩放 viewport,需要配合initial-scale 。
- 文本折行 存在于缩放失效的机型中,某些手机为了便于文本的阅读,在文本到达 viewport 边缘(非元素容器的边缘)时即进行折行,而当 viewport 宽度被修正后,浏览器并没有正确的重绘,所以就发现文本没有占满整行。一些常用的段落性文本标签会存在该问题。
缩放失效问题需通过 js 动态设定 initial-scale。
利用 rem 布局依照某特定宽度设定 rem 值(即 html 的 font-size),页面任何需要弹性适配的元素,尺寸均换算为 rem 进行布局;当页面渲染时,根据页面有效宽度进行计算,调整 rem 的大小,动态缩放以达到适配的效果。利用该方案,还可以根据 devicePixelRatio 设定 initial-scale 来放大 viewport,使页面按照物理像素渲染,提升清晰度。
优点:缺点:
- 清晰度高,能达到物理像素的清晰度。
- 能解决 DPR 引起的“1像素”问题。
- 向后兼容较好,即便屏幕宽度增加、PPI 增加该方案依旧适用。
- 适配 js 需尽可能早进入,减少(避免)viewport 变化引起的重绘。
- 某些Android机会丢掉 rem 小数部分。
- 需要预编译库进行单位转换。
<span class="nt"><meta</span> <span class="na">name=</span><span class="s">"viewport"</span> <span class="na">content=</span><span class="s">"target-densitydpi=device-dpi,width=640,user-scalable=no"</span> <span class="nt">/></span>
<span class="c1">//首先检查浏览器类型</span> <span class="kd">var</span> <span class="nx">browser</span> <span class="o">=</span> <span class="nx">getBrowser</span><span class="p">();</span> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">top</span> <span class="o">===</span> <span class="nb">window</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">t</span><span class="p">,</span> <span class="nx">sw</span><span class="p">;</span> <span class="k">if</span> <span class="p">(</span><span class="nx">browser</span> <span class="o">===</span> <span class="s1">'Gecko'</span><span class="p">)</span> <span class="p">{</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span><span class="p">));</span> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">'<meta name="viewport" content="width='</span> <span class="o">+</span> <span class="mi">100</span> <span class="o">/</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">'%, user-scalable=no, initial-scale='</span> <span class="o">+</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">'"/>'</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">browser</span> <span class="o">===</span> <span class="s1">'Trident'</span><span class="p">)</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nx">write</span><span class="p">(</span><span class="s1">'<meta name="viewport" content="width=device-width, user-scalable=no"/>'</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span><span class="p">));</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">t</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">'meta'</span><span class="p">);</span> <span class="nx">t</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="s1">'viewport'</span><span class="p">;</span> <span class="nx">t</span><span class="p">.</span><span class="nx">content</span> <span class="o">=</span> <span class="s1">'width=device-width, user-scalable=no, initial-scale=1'</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nx">head</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">t</span><span class="p">);</span> <span class="nx">sw</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span><span class="p">);</span> <span class="k">if</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">min</span><span class="p">(</span><span class="nx">screen</span><span class="p">.</span><span class="nx">width</span> <span class="o">/</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">,</span> <span class="nx">screen</span><span class="p">.</span><span class="nx">height</span> <span class="o">/</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span><span class="p">)</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="nb">document</span><span class="p">.</span><span class="nx">documentElement</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">zoom</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nx">sw</span> <span class="o">/</span> <span class="nx">devicePixelRatio</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">s</span> <span class="o">=</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nx">sw</span><span class="p">);</span> <span class="nx">t</span><span class="p">.</span><span class="nx">content</span> <span class="o">=</span> <span class="s1">'width='</span> <span class="o">+</span> <span class="mi">100</span> <span class="o">/</span> <span class="nx">s</span> <span class="o">+</span> <span class="s1">'%, user-scalable=no, initial-scale='</span> <span class="o">+</span> <span class="nx">s</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">function</span> <span class="nx">calcRato</span><span class="p">(</span><span class="nx">sw</span><span class="p">)</span> <span class="p">{</span> <span class="c1">//离散放大级别</span> <span class="kd">var</span> <span class="nx">step</span> <span class="o">=</span> <span class="mf">0.125</span><span class="p">;</span> <span class="c1">//基准宽度为320px</span> <span class="kd">var</span> <span class="nx">zoom</span> <span class="o">=</span> <span class="nx">sw</span> <span class="o">/</span> <span class="mi">320</span><span class="p">;</span> <span class="c1">//放大时不使用线性算法</span> <span class="k">if</span> <span class="p">(</span><span class="nx">zoom</span> <span class="o">></span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="nx">zoom</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">sqrt</span><span class="p">(</span><span class="nx">zoom</span><span class="p">)</span> <span class="o">/</span> <span class="nx">step</span><span class="p">)</span> <span class="o">*</span> <span class="nx">step</span><span class="p">;</span> <span class="p">}</span> <span class="k">return</span> <span class="nx">zoom</span><span class="p">;</span> <span class="p">}</span>

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

在html5中,width的意思是寬度,width屬性定義元素內容區的寬度,在內容區外面可以增加內邊距、邊框和外邊距,只需要給元素設定「元素{width:數值}」即可。

在Linux管理umount設備時,時常會遇到"deviceisbusy",如果umount一個檔案系統碰到這種情況,並且你並沒有在所需卸載的目錄下。那麼很可能有使用者或進程在使用那個目錄。 #umount/mntumount:/mnt:deviceisbusyumount:/mnt:deviceisbusy那麼必須用fuser指令來檢視processID和行程的擁有者,例如:#fuser-mu/mnt/mnt:25781c(root)#kill-925781#umount/ mnt像下面這

在Docker中,掛載目錄的權限問題通常可以透過以下方法解決:使用-v參數指定掛載目錄時新增權限相關的選項。可以透過在掛載的目錄後面新增:ro或:rw來指定掛載目錄的權限,分別表示只讀和讀寫權限。例如:dockerrun-v/host/path:/container/path:roimage_name在Dockerfile中定義USER指令來指定容器中執行的用戶,以確保容器內部的操作符合權限要求。例如:FROMimage_name#CreateanewuserRUNuseradd-ms/bin/

Windows10作業系統無疑是當今最具影響力的作業系統之一,它具有無比強大的裝置管理功能,這個強大的功能裡面當然也包括裝置的啟用和停用! WIN10家庭版系統怎麼禁用Device方法一:裝置管理員的裝置停用1、首先,讓我們開啟裝置管理員吧!有以下三種方法:(1)按下鍵盤上的WIN+X鍵,選擇裝置管理員即可。 (2)在開始選單中直接輸入「裝置管理員」點選即可! (3)在控制台中尋找並選取裝置管理員。 2、接下來,在設備清單中找到想要停用的設備囉!點擊禁用即可。 Ps:在這裡,可以看到所有已經連接到系統中的

用XilinxPCIEdemo的時候,編譯了一個xapp1022提供的Linux驅動,出錯提示找不到pci_find_device函數。說明上說這個驅動是fedora上的,目前環境是Centos7。驅動程式中使用的頭檔只有一個linux/pci.h與pci有關,所以進去看了一下,沒有。心裡想著也許需要安裝庫,找了一下果然有:pciutils。安裝之後重新編譯了以下,還是失敗。重新看頭文件,多了一個pci資料夾,裡面有一個pci.h,這個pci.h中有很多函數聲明,但是沒有pci_find_devi

有使用者反映,在安裝了微軟3月份的Win11更新修補程式KB5035853後,出現了藍色畫面死機錯誤,其中系統頁面顯示「ThreadStuckinDeviceDriver」。據了解,這種錯誤可能是由硬體或驅動程式問題引起的。以下是五種修復方法,希望能夠快速解決電腦藍色畫面問題。方法一:執行系統檔案檢查在指令提示字元中執行【sfc/scannow】指令,可用來偵測和修復系統檔案的完整性問題。這個命令的作用是掃描並修復任何缺失或受損的系統文件,有助於確保系統的穩定性和正常運作。方法二:1.下載並開啟“藍色畫面修復工具”

方法有像素值、百分比、em單位、rem單位、vw/vh單位、auto、fit-content、min-content、max-content。詳細介紹:1、像素值(px):像素值是固定的,無論螢幕解析度如何變化,它的寬度都是不變的。例如:width: 300px;2、百分比(%):百分比寬度是相對於父元素的寬度的。例如:width: 50%;3、em單位等等。

CSS內容屬性詳解:content、counter和quotesCSS(層疊樣式表)是前端開發中不可或缺的一部分,它可以幫助我們美化網頁並增強使用者體驗。在CSS中,有一些特殊的屬性可以用來控製文字內容的顯示,其中包括content、counter和quotes。本文將詳細介紹這些屬性,並提供具體的程式碼範例。一、content屬性content屬性
