談談個人對移動端視口的理解

2021-07-12 05:25:03 字數 1319 閱讀 5951

1.筆者發現,同樣的乙個網頁,在電腦端顯示清楚,但是如果在移動端沒有做自適應,有些情況下同乙個網頁在

移動端字型會變得很模糊。在開發移動端應用的時候,習慣性的我們會加上一下meta標籤。

<metaname="viewport"content="width=device-width,initial-scale=1.0"user-scalable="no;">

2.為什麼需要加上這個標籤?
(1)首先談談自己對於layout viewport(布局視口)的理解
個人對於布局視口的理解,就是裝置當前選擇的解析度。預設情況下,如果同乙個電腦端網頁要在移動端
顯示ios,android都將這個視口設為980px,設想一般手機的解析度是400*600px左右,如果要在該手機上呈現乙個98
0px的視口,那麼顯然這個網頁會變得模糊不清。
(2)什麼是visual viewport(視覺視口)
視覺視口,個人認為視覺視口與物理畫素有關,一般的手機裝置物理畫素是大大的高於解析度的,
也就是說視覺視口的大小是遠遠大於布局視口,下面是一段官方對於視覺視口的解釋:
visual viewport(視覺視口)備物理螢幕的可視區域,螢幕顯示器的物理畫素,同樣尺寸的螢幕,畫素密度大的裝置,硬體畫素會更多。例如iphone的物理畫素:

(3)兩者之間的關係,以及css中的畫素

在等比例縮放的情況下,css中的1px,與固定的邏輯畫素dip是相等的,這裡的邏輯畫素,在任何裝置中都

是不變的css的1px/(dip)==縮放比例,而乙個dip所對應的物理畫素呢。可以這樣計算:

dip=(物理畫素)/(螢幕當前解析度)

於是在等比縮放的條件下,css中的1px=(物理畫素)/(螢幕當前解析度);

我們在當前meta標籤中,如果設定了width="device-width"就是設定了布局視口等於手機的解析度,

這樣:(a)在未設定meta標籤時:css中的1px=(物理畫素)/(980px)

(b)在設定了meta標籤後,css中的1px=(物理畫素)/(手機解析度);

一般而言(b)是(a)的兩倍甚至以上,同樣的1px,(b)中代標了更多的物理畫素,因此變現的狀態就是

字型會更大更清晰!

談談對MVC的理解

mvc是一種設計模式,它把應用程式拆分為模型物件,檢視物件,控制器物件三大部分.一.模型物件 模型物件封裝了應用程式的資料,模型物件更改時,會通知控制器物件,控制器物件更新相應的檢視物件.二 檢視物件 檢視物件應用程式中使用者所看得到的,其主要目的是顯示應用程式中模型物件的資料,在應用程式中,所有的...

談談對Spring IOC的理解

spring ioc 控制反轉,也叫依賴注入 di 控制反轉是一種思想,是將原來程式主導變為第三方主導,也就是容器主導,程式需要什麼,容器提供給程式,原來 是 程式需要a類,我們需要建立也就是new a 給程式,通過使用spring ioc 我們可以不用這麼寫,在配置檔案中進行配置便可以了,配置完成...

談談對jdbc的理解

jdbc是一種資料庫連線技術,可以用來對資料庫進行增刪改查等操作,本質上是sun公司定義的一系列介面,因為不同資料庫連線方式是不一樣的,同一段 沒有辦法使用不同的資料庫,所以sun公司定義了介面標準,具體由資料庫廠商來實現,要切換其他的資料庫,只要註冊廠商的驅動就可以使用,不用修改源 使用步驟 1....