一個方案-適配所有移動端網頁

lixiang 發布于2019-08-01 15:57 / 361人閱讀

摘要：做過移動端網頁的都知道，在一些高要求的移動網頁上解決，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。初始化的縮放比例，這個屬性和中有異曲同工之妙。最后附一個極細邊框線的教程。

做過移動端網頁的都知道，在一些高要求的移動網頁上解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。

我曾今也嘗試了很多辦法，也參考了別人加的思路，有點用js，有的用媒體查詢，有的用一些比較新的單位rm、rem等等...... 我覺得還是很麻煩，難道就沒有一個可以一行代碼覺接問題的方案嗎？經過我各種的嘗試之后終于有了，目前階段還沒發現bug，如果有問題，還請不吝賜教!

相信這一段代碼是在移動端上必須的一段，大概的意思大家也都知道
width=device-width：讓寬度=設備縮放之后的寬度，就是320、360、375、414這些。
initial-scale=1：初始化的縮放比例1，這個屬性和css中transform: scale(1);有異曲同工之妙。
minimum-scale=1：最小縮放比例，相當于你給div設置mix-height一樣，帶有限制。
maximum-scale=1：最大縮放比例，同上，不說了。
user-scalable=no：是否允許用戶使用雙指進行縮放，（默認不允許）。

看了這些，我就想 width=device-width 我就不能設置一個固定值嗎？width=320，經過我的測試，發現是可以的。

哈哈哈！完美解決，經過我長期的實驗，這里有一個坑，就是 width=固定寬度之后是不能寫 initial-scale=1 的，（寫了之后在有些瀏覽器中不行，所以建議不寫）。

最后附一個1px極細邊框線的教程。大多數的前端的設計圖應該都是640或者720的寬度，當我們寫border:1px的時候，實際上是物理相似2px，這種情況平時做直線的時候勉強可以應付，transform: scaleY(0.5);這樣看起來就洗了很多，但是做圓角的按鈕的時候就力不從心了，而且大量使用transform 的代碼也不是很美觀，這個時候我們可以
這樣：

你沒看錯，就是640，和設計圖的尺寸一模一樣，每次大的值都不用在除以2了，有的時候一個 25除以2的時候就是不是還在糾結是寫12呢還是13呢？這樣寫的網頁實現在手機上運行的效果看起來會細膩很多。

云服務器 GPU云服務器移動端適配方案移動端適配移動端適配 js 移動適配

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50228.html

一個方案 - 適配所有移動端網頁

摘要：做過移動端網頁的都知道，在一些高要求的移動網頁上解決的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。做過移動端網頁的都知道，在一些高要求的移動網頁上解決Iphone5、6、6p的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。我曾今也嘗試了很多辦法，也參考了別人加的思路，有的用js，有的用媒體查詢，有的用...

Jingbin_ 2019-08-21 11:19 評論0 收藏0
一個方案-適配所有移動端網頁

摘要：做過移動端網頁的都知道，在一些高要求的移動網頁上解決，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。初始化的縮放比例，這個屬性和中有異曲同工之妙。最后附一個極細邊框線的教程。做過移動端網頁的都知道，在一些高要求的移動網頁上解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。我...

cnsworder 2019-08-29 11:32 評論0 收藏0
一個方案-適配所有移動端網頁

摘要：做過移動端網頁的都知道，在一些高要求的移動網頁上解決，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。初始化的縮放比例，這個屬性和中有異曲同工之妙。最后附一個極細邊框線的教程。做過移動端網頁的都知道，在一些高要求的移動網頁上解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設備上顯示還有稍微有一點差距的。我...

edgardeng 2019-08-21 14:46 評論0 收藏0
懶人必備的移動端定寬網頁適配方案

摘要：如何以不變應萬變，用簡簡單單的幾行代碼就能支持種類繁多的屏幕分辨率呢今天就給大家介紹一種懶人必備的移動端定寬網頁適配方法。測試設備三星真機三星虛擬機真機的適配比較簡單，只需要設置即可。本文最初發布于我的個人博客：咀嚼之味如今移動設備的分辨率紛繁復雜。以前僅僅是安卓機擁有各種各樣的適配問題，如今 iPhone 也擁有了三種主流的分辨率，而未來的 iPhone 7 可能又會玩出什么新花...

wenshi11019 2019-08-19 17:10 評論0 收藏0