目錄
回复内容:
首頁 web前端 H5教程 content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计?

content"width=640,user-scalable=no" 然后再进行固定尺寸的px设计?

Jun 07, 2016 am 08:43 AM
content device user width

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

视觉稿、页面宽度、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 小数部分。
  • 需要预编译库进行单位转换。
(轉自MobileWeb 适配总结) 别的不多说了,强烈建议看看前几天刚写的一篇文章:使用Flexible实现手淘H5页面的终端适配 应该能让你找到需要的答案 你在用的可能是:
 <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>
登入後複製
对,我也是用这种方法比较方便。不过由于宽高等比缩放后,在元素定位布局时很多手机的屏幕就不够高,因此还是得媒体查询做些细节上的调节 用过这种代码写hybrid app效果还行,核心区别就在于它没有媒体查询,手机,平板都长一个样,等比缩放不仔细看效果也不差(毕竟会变形),如果你只需要开发个大部分机型适配的页面,我觉得这么写挺好
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

html的width是什麼意思 html的width是什麼意思 Jun 03, 2021 pm 02:15 PM

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

解決Linux中裝置繁忙的問題 解決Linux中裝置繁忙的問題 Jan 02, 2024 pm 03:44 PM

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

docker掛載目錄權限問題怎麼解決 docker掛載目錄權限問題怎麼解決 Feb 29, 2024 am 10:04 AM

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

如何在WIN10家庭版系統中停用設備? 如何在WIN10家庭版系統中停用設備? Jan 17, 2024 pm 03:57 PM

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

解決CentOS7中尋找pci設備函數缺失的方法 解決CentOS7中尋找pci設備函數缺失的方法 Jan 05, 2024 am 09:08 AM

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

Thread Stuck in Device Driver藍屏的五種修復方法 Thread Stuck in Device Driver藍屏的五種修復方法 Mar 25, 2024 pm 09:40 PM

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

css表示width值有哪些方法 css表示width值有哪些方法 Nov 13, 2023 pm 05:47 PM

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

CSS 內容屬性詳解:content、counter 與 quotes CSS 內容屬性詳解:content、counter 與 quotes Oct 21, 2023 am 10:16 AM

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

See all articles