手機端適配策略以及實現

PascalXie 發布于2019-08-19 18:21 / 1370人閱讀

摘要：設備本身的適配策略和的適配策略是不一樣的。暫且稱之為更大內容策略。個人認為的策略更為合理。這種情況一般作用于容器元素。用腳本實現有極少數布局上的問題似乎無能為力了。

設備本身的適配策略

ios和Android的適配策略是不一樣的。

對于ios,一個設備含有越多的邏輯像素，那么這個設備也就越大，換句話說，ios的邏輯像素可以作為一個物理長度單位。應用的場景是這樣的，用px單位設置了一個元素的大小，這個元素在不同大小的ios設備下實際上是一樣大的。所以ios策略是更大的屏幕是為了顯示更多的內容。暫且將它稱之為更多內容策略。

然而對于Android設備，大致的情況是不管設備大小，包含的邏輯像素寬度都是360px。用px單位設置一個元素的大小，設備越大，它在設備上呈現的也等比變大。所以Android的策略是，屏幕越大是為了讓內容看起來更大。暫且稱之為更大內容策略。

個人認為ios的策略更為合理。但是由于我們無法獲取設備的物理尺寸大小，所以也就沒有辦法在Android的設備上面應用更多內容策略。所以我決定就在ios的設備上面執行ios的更多內容策略，而在Android的設備上執行更大內容策略。

ios的適配的策略實現

根據更多內容策略，我們會遇到兩種情況

第一種是元素大小不隨設備屏幕變大而變大，比如屏幕、圖標、導航欄等，因為我們需要為用戶呈現更多的內容，這個時候使用的單位是px。

第二種情況，元素的大小需要隨著設備的變大而變化。這種情況一般作用于容器元素。因為屏幕變大了，容器如果還是一樣的大小就不符合呈現更多內容策略。這種情況的實現比較復雜，下面我們詳細討論這種情況下的解決方案。

百分比

百分比這個單位是參照父元素大小的相對單位。其實百分比可以解決大部分問題。

我需要一個占據整個屏幕大小的容器，下面的代碼可以完美解決

.container { 
    width:100%; 
    height:100%; 
}

又或者我需要一個占據屏幕百分之五十的內容彈窗，至于高度就由內容決定吧

.dialog { 
    width:50%; 
    height:auto; 
}

對了它得居中，這也沒什么問題

.dialog { 
    width:50%; 
    height:auto; 
    margin-left:-25%; 
    left:50%; 
}

但是，如何涉及到高度，百分比的問題就顯現出來了。比如我想讓上面的彈窗的高度為屏幕高度的60%，至于內容過多就讓它內部滾動吧；

.dialog { 
    width:50%; 
    height:auto; 
    margin-left:-25%; 
    left:50%;
    height:60%;
}

似乎也沒有什么問題，但是，如果我想讓它上下居中

.dialog { 
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height:60%;
    margin-top:-30%;
    top:50%;
}

無奈的發現它并沒有居中，問題就出在maring-top 百分比所參照的是父級元素的寬度而不是高度。終于發現了一個百分比無能為力的一個點了。

改變一下需求，我們需要一個正方形的彈窗，彈窗的寬度還是要求50%；

.dialog {
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height: ?%;
}

我們試著做了，但是他的高度應該是多少呢，確實百分比無能為力了。

vw & vh

vw 是將當前屏幕的寬度分為一百份之后的長度

wh 是將當前屏幕的高度分為一百份之后的長度

這幾乎是對百分比方案的完美補充了。針對上面百分比無能為力的兩個點，vw 和 vh 都能應對。

百分比高度元素的垂直居中

.dialog { 
    width:50%; 
    margin-left:-25%; 
    left:50%;
    height:60vh;
    margin-top:-30vh;
    top:50%;
}

百分比寬度元素固定長寬比例

    .dialog { 
        width:50vw;
        margin-left:-25vw; 
        left:50%;
        height: 50vw;
}

但是遺憾的是 vw 和 vh 存在著不可忽視的兼容新問題;

用 rem 模擬 vw & vh

rem只能模仿 vw 和 vh 中的一個。因為一般比較常用的是vw，所以我們把 rem 當做 vw 使用。

可以使用腳本計算 html 的 rem，代碼如下

var deviceWidth = window.screen.width;
document.querySelector("html").style.fontSize = (deviceWidth)+"px";

百分比寬度元素固定長寬比例

.dialog {
    width: 0.5 rem;
    margin-left: -0.25 rem;
    left: 50%;
    height: 0.25 rem;
}

由于 rem 只能模仿 vw vh 的一種所以這時候對于百分比高度元素的垂直居中的實現就無能為力了。

用腳本實現

有極少數布局上的問題 css似乎無能為力了。這個適合只能依靠萬能的腳本了。

云服務器 GPU云服務器 html實現手機端移動端適配移動端適配方案移動端適配 js

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

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

手機端適配策略以及實現

摘要：設備本身的適配策略和的適配策略是不一樣的。暫且稱之為更大內容策略。個人認為的策略更為合理。這種情況一般作用于容器元素。用腳本實現有極少數布局上的問題似乎無能為力了。設備本身的適配策略 ios和Android的適配策略是不一樣的。對于ios,一個設備含有越多的邏輯像素，那么這個設備也就越大，換句話說，ios的邏輯像素可以作為一個物理長度單位。應用的場景是這樣的，用px單位設置了一個元...

xingqiba 2019-08-30 13:01 評論0 收藏0
淺談設計模式1——策略模式 | 適配器模式 | 工廠模式

摘要：適配器模式要比策略模式要好理解一些。書中的適配器模式有兩種實現方式，一種是通過代理，另一種是通過繼承。通過工廠模式獲得具體接口。而且工廠模式承擔的壓力過重，可能會導致職責的混亂。工廠方法模式這其實是工廠模式的一個簡單的升級。前言最近在看《Think In JAVA》，其中在講解繼承，組合，抽象類和接口的時候，提到了題中的幾個設計模式。這幾個設計模式也確實讓我更好的理解了JAVA中各...

0x584a 2019-08-16 10:39 評論0 收藏0
php設計模式

摘要：我們今天也來做一個萬能遙控器設計模式適配器模式將一個類的接口轉換成客戶希望的另外一個接口。今天要介紹的仍然是創建型設計模式的一種建造者模式。設計模式的理論知識固然重要，但計算機程序的思維邏輯 (54) - 剖析 Collections - 設計模式上節我們提到，類 Collections 中大概有兩類功能，第一類是對容器接口對象進行操作，第二類是返回一個容器接口對象，上節我們介紹了...

Dionysus_go 2019-06-28 14:37 評論0 收藏0
php設計模式

摘要：我們今天也來做一個萬能遙控器設計模式適配器模式將一個類的接口轉換成客戶希望的另外一個接口。今天要介紹的仍然是創建型設計模式的一種建造者模式。設計模式的理論知識固然重要，但計算機程序的思維邏輯 (54) - 剖析 Collections - 設計模式上節我們提到，類 Collections 中大概有兩類功能，第一類是對容器接口對象進行操作，第二類是返回一個容器接口對象，上節我們介紹了...

vspiders 2019-06-28 14:33 評論0 收藏0
服務API版本控制設計與實踐

摘要：場景一版本號控制隨著互聯網發展的，用戶體驗要求也是越來越高，產品形式也會隨之每年有不一樣的變化。使用客戶端版本號控制是首選考慮策略。一、前言筆者曾負責vivo應用商店服務器開發，有幸見證應用商店從百萬日活到幾千萬日活的發展歷程。應用商店客戶端經歷了大大小小上百個版本迭代后，服務端也在架構上完成了單體到服務集群...

不知名網友 2021-11-29 10:50 評論0 收藏0