資訊專欄INFORMATION COLUMN
摘要：做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。
做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決Iphone5、6、6p的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。
我曾今也嘗試了很多辦法，也參考了別人加的思路，有的用js，有的用媒體查詢，有的用一些比較新的單位rm、rem等等...... 我覺得還是很麻煩，難道就沒有一個可以一行代碼解決問題的方案嗎？經(jīng)過我各種的嘗試之后終于有了，目前階段還沒發(fā)現(xiàn)bug，如果有問題，還請不吝賜教!
相信這一段代碼是在移動端上必須的一段，大概的意思大家也都知道
width=device-width：讓寬度=設(shè)備縮放之后的寬度，就是320、360、375、414這些。
initial-scale=1：初始化的縮放比例1，這個屬性和css中transform: scale(1);有異曲同工之妙。
minimum-scale=1：最小縮放比例，相當(dāng)于你給div設(shè)置mix-height一樣，帶有限制。
maximum-scale=1：最大縮放比例，同上，不說了。
user-scalable=no：是否允許用戶使用雙指進(jìn)行縮放，（默認(rèn)不允許）。
看了這些，我就想 width=device-width 我就不能設(shè)置一個固定值嗎？width=320， 經(jīng)過我的測試，發(fā)現(xiàn)是可以的。
哈哈哈！ 完美解決，經(jīng)過我長期的實驗，這里有一個坑，就是 width=固定寬度 之后是不能寫 initial-scale=1 的，（寫了之后在有些瀏覽器中不行，所以建議不寫）。
最后附一個1px極細(xì)邊框線的教程。大多數(shù)的前端的設(shè)計圖應(yīng)該都是640或者720的寬度，當(dāng)我們寫border:1px的時候，實際上是物理相似2px，這種情況平時做直線的時候勉強(qiáng)可以應(yīng)付，transform: scaleY(0.5);這樣看起來就洗了很多，但是做圓角的按鈕的時候就力不從心了，而且大量使用transform 的代碼也不是很優(yōu)雅，這個時候我們可以
這樣：
你沒看錯，就是640，和設(shè)計圖的尺寸一模一樣，每次大的值都不用在除以2了，有的時候 一個 25px除以2的時候就是不是還在糾結(jié)是寫12px呢還是13px呢？ 這樣寫的 網(wǎng)頁實現(xiàn)在手機(jī)上運(yùn)行的效果看起來會細(xì)膩很多。
看到有很多同學(xué)面對這個的一些問題，我這里更新一點，都覺得不能全部適用，我這里謝了一個demo，放在了個人網(wǎng)站上，有興趣的同學(xué)可以研究下， 可以在chrome瀏覽器中模擬移動設(shè)備，也可以用手機(jī)打開這個網(wǎng)站， 建議用手機(jī)打開，畢竟chrome瀏覽器無法模擬手機(jī)的物理1px. demo地址 http://demo.yuanyuanyuan.me/v...
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/86569.html
摘要：做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。初始化的縮放比例，這個屬性和中有異曲同工之妙。最后附一個極細(xì)邊框線的教程。 做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。 我...
摘要：做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。初始化的縮放比例，這個屬性和中有異曲同工之妙。最后附一個極細(xì)邊框線的教程。 做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。 我...
摘要：做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。初始化的縮放比例，這個屬性和中有異曲同工之妙。最后附一個極細(xì)邊框線的教程。 做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。 我...
摘要：如何以不變應(yīng)萬變，用簡簡單單的幾行代碼就能支持種類繁多的屏幕分辨率呢今天就給大家介紹一種懶人必備的移動端定寬網(wǎng)頁適配方法。測試設(shè)備三星真機(jī)三星虛擬機(jī)真機(jī)的適配比較簡單，只需要設(shè)置即可。 本文最初發(fā)布于我的個人博客：咀嚼之味 如今移動設(shè)備的分辨率紛繁復(fù)雜。以前僅僅是安卓機(jī)擁有各種各樣的適配問題，如今 iPhone 也擁有了三種主流的分辨率，而未來的 iPhone 7 可能又會玩出什么新花...
閱讀 2410·2021-11-12 10:34
閱讀 1479·2019-08-29 16:15
閱讀 2691·2019-08-29 15:17
閱讀 1352·2019-08-23 17:09
閱讀 396·2019-08-23 11:37
閱讀 2457·2019-08-23 10:39
閱讀 476·2019-08-22 16:43
閱讀 3119·2019-08-22 14:53
