HTML5手機(jī)端頁(yè)面縮放問(wèn)題應(yīng)該如何解決？要做一個(gè)H5移動(dòng)終端項(xiàng)目，首先要做好適應(yīng)工作一般來(lái)說(shuō)，在H5頭上做個(gè)說(shuō)明。&Ltmeta name=“viewport”content=“width=devi

HTML5手機(jī)端頁(yè)面縮放問(wèn)題應(yīng)該如何解決？

要做一個(gè)H5移動(dòng)終端項(xiàng)目，首先要做好適應(yīng)工作

一般來(lái)說(shuō)，在H5頭上做個(gè)說(shuō)明。

&Ltmeta name=“viewport”content=“width=device width，initial scale=1，user scale=no，minimum scale=1.0，maximum scale=1.0”>

上面的意思是寬度是屏幕的寬度，比例是1，不允許調(diào)整比例，最小比例是1，最大刻度為1。

然后與REM合作以適應(yīng)各種類型的手機(jī)。

1. 使用REM來(lái)匹配VW

2。使用REM來(lái)匹配根元素的字體大小

我選擇了第二種方法來(lái)動(dòng)態(tài)計(jì)算HTML根元素的字體大小，然后使用REM。兼容各種手機(jī)。

如何使用HTML5技術(shù)適配手機(jī)網(wǎng)站？

從以下代碼開(kāi)始：<！Doctypehtml>< HTML>< head>< metacharset=“UTF-8”>< metaname=“viewport”content=“width=device width，initial scale=1”>按百分比定義寬度，CSS代碼可以適當(dāng)使用：@mediaonlyscreenand（最大-寬度：449px)有兩種方法可以根據(jù)屏幕像素自動(dòng)調(diào)用不同的CSS代碼

1。通過(guò)設(shè)置viewport參數(shù)

2。使用CSS3中的縮放方法，需要得到當(dāng)前屏幕的大小，然后根據(jù)網(wǎng)頁(yè)的寬度計(jì)算縮放比例，然后進(jìn)行縮放。但目前手機(jī)和瀏覽器種類繁多，每種方法都有各自的問(wèn)題。&Ltmeta name=“viewport”content=“width=device width，initial scale=1.0，minimum scale=0.5，maximum scale=2.0，user scale=yes”/>通過(guò)在頁(yè)面中添加上述語(yǔ)句，頁(yè)面寬度可以自動(dòng)適應(yīng)手機(jī)屏幕的寬度。其中：width=設(shè)備寬度：表示寬度是設(shè)備屏幕的寬度。初始比例=1.0：表示初始比例。最小刻度=0.5：表示最小刻度。最大刻度=2.0：表示最大刻度。用戶比例=是：表示用戶是否可以調(diào)整比例