導航:首頁 > 器材知識 > 網站怎麼設置移動設備適配

網站怎麼設置移動設備適配

發布時間：2022-09-10 22:30:14

Ⅰ 怎樣低成本的實現網頁在移動端的適配

解決方案涉及到的知識點：

viewport

媒體查詢(media query)

Javascript window.matchMedia

響應式圖片

柵格布局

頂部導航

測試工具

iOS和Android自帶的瀏覽器都是基於webkit內核，所以我們可以使用viewport屬性和media
query技術實現網站的響應性。

viewport

在<head>之中添加viewport元數據標簽。

width=device-width 實現屏幕適配，頁面繪制根據觸屏大小變化，保持一致。

initial-scale 表示初始縮放。

Js代碼

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大縮放比例，1意味著不能進行縮放。

user-scalable=no
禁用頁面縮放（zooming）功能。禁用縮放後，用戶只能滾動屏幕，讓你的網站看上去更像原生應用。

注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！

Js代碼

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

媒體查詢(media
query)

根據不同的解析度，引用不用的css

Css代碼

<link rel="stylesheet" type="text/css"

media="screen and (max-device-width: 480px)"

href="shetland.css" />
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的實現 http://v3.bootcss.com/css/#grid-media-queries ，

以下是LESS方法的實現

Js代碼

/* Small devices (tablets, 768px and up) */

@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */

@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */

@media (min-width: @screen-lg-min) { ... }
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia

用CSS3解決的確很方便，但某些場景下仍然需要JS技術。

Js代碼

if (window.matchMedia("(min-width: 400px)").matches) {

// The screen width is 400px or wider.

} else {

// The screen width is less than 400px.

}
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

狀態改變時監聽

Js代碼

function setup_for_width(mql) {

if (mql.matches) {

// The screen width is 400px or wider. Set up or change things

// appropriately.

} else {

// The screen width is less than 400px. Set up or change things

// appropriately.

}

}

var width_mql = window.matchMedia("(min-width: 400px)");

// Add a listener for when the result changes

width_mql.addListener(setup_for_width);

// And share the same code to set things up with our current state.

setup_for_width(width_mql);

Ⅱ HTML網頁如何完美的適配到移動設備上

1、在已安裝的電腦桌面新建一個Word文檔（演示文稿以Office2007系列為主），然後打開新建的文檔，輸入文字。

Ⅲ 移動端Web頁面適配方案（整理版）

@(概述)[基本概念|百分比|rem|vw/vh|響應式設計]

移動端web頁面的開發，由於手機 屏幕尺寸 、 解析度 不同，或者需要考慮 橫豎屏 問題，為了使得web頁面在不同移動設備上具有相適應的展示效果，需要在開發過程中使用合理的適配方案來解決這個問題。

早期網頁設計採用 靜態布局 ，通過 <meta> 標簽中的 applicable-device 應用設備標識識別移動設備，即 <meta name = 'applicable-device' content = 'mobile'> ，在 <meta> 標簽中的 viewport 標簽中設置 width ，通過 js 動態修改標簽的 initial-scale 使得頁面等比縮放，剛好占滿整個屏幕。一些文章中有提到靜態布局中頁面各個元素採用 px 為單位，這種方案實現簡單，不存在兼容性問題，但用戶體驗很不友好。

後面出現 流式布局 ，使用百分比 % 定義寬度，高度使用 px 固定，根據可視區域大小實時進行尺寸調整，通常使用 max-width/min-width 控制尺寸范圍過大或者過小。這種方案實現比較簡單，但在大屏手機或橫豎屏切換場景下可能會導致頁面元素被拉伸變形，字體大小無法隨屏幕大小發生變化。

順應不同頁面字體大小展現問題，出現了 彈性布局 。這種布局方案下，包裹文字的元素的尺寸採用 em/rem 為單位，頁面主要劃分區域的尺寸依據情況使用 px 、百分數或者 em/rem 。如一些高校的網站 jlu ，頁面的主要劃分區域使用 px 和百分比，包裹文字的元素和文字採用 em 。

上面的這幾種方案下，頁面元素的大小按照屏幕解析度進行適配調整，但是整體布局不變，對於 響應式web設計 ，網頁布局會隨著訪問它的視口及設備的不同呈現不同的樣式，在實現上可能會以上多種方案的結合，同時搭配 媒體查詢 技術使用，使得一個頁面在多個終端 (PC, mobile, pad) 呈現滿意效果，如 mashable 。

[TOC]

像素，是屏幕上顯示數據的最基本的點，表示相對大小。不同解析度下相同長度的 px 元素顯示會不一樣，是因為像素點的個數相同情況下，不同解析度下每個像素點對應的像素寬度不同。比如同樣是 14px 大小的字，在 1366×768 顯示屏下會顯示的小，在 1024×768 顯示屏下會相對大。也稱為 物理像素（設備像素 ），是解析度的尺寸單位。

印刷行業常用單位，能夠使用測量設備測得的長度，等於 1/72 英寸。

在不同屏幕上， css 像素呈現的物理尺寸一致，但 css 像素對應的物理像素具數不同。標準的顯示密度下， 1 個 css 像素對應一個物理像素，縮放時， 1 個 css 像素對應的物理像素會減增。是一種 設備獨立像素(device independent pixels: DIPs)

像素密度，每英寸所擁有的像素數。值越高，顯示畫面細節越豐富。計算公式為：[圖片上傳失敗...(image-245547-1621406560980)]

，其中 [圖片上傳失敗...(image-2b7617-1621406560980)]

和 [圖片上傳失敗...(image-f0525f-1621406560980)]

是解析度的寬高，[圖片上傳失敗...(image-2b6254-1621406560980)]

是屏幕尺寸。

列印設備每英寸印刷出來的點有多少個，值越高，圖片越細膩。

設備物理像素和設備獨立像素比 ，即[圖片上傳失敗...(image-6bbc3c-1621406560980)]

是指在理想布局寬度，使用多少個物理像素來渲染一個css像素。js中通過 window.devicePixelRatio 獲取，css中通過 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 進行媒體查詢。

移動端涉及 布局視口 （Layout Viewport）、 視覺視口 （Visual ViewPort）和 理想視口 （Ideal ViewPort）。

與移動端web頁面適配有關的手機屏幕特性包括

硬體所支持的，屏幕每行的像素 * 每列的像素點數，單位是 px 。

設備獨立的，軟體可以達到的，個人理解是使得軟體/頁面在不同屏幕上顯示出來的效果一致。

像素解析度 ÷ 邏輯解析度等於倍率，如 @3x 表示解析度的 3 倍。一個已知物理像素大小的元素，如果在普通屏中其設備像素等於 css 像素，但在一些高清屏中，如 Retina 顯示屏，一個css像素對應 2 或 3 個設備像素，這時顯示出來的元素會變小。為了讓元素如期待顯示，需要傳入 原始設計稿尺寸 × 倍率 的設計稿，根據 DPR 的定義，這樣載入後能夠達到同樣的效果。

手機屏幕對角線長度換算成英寸的大小

貼上源碼分析

視口是瀏覽器中用於呈現網頁的區域，移動端的視口通常指的是 布局視口

使用 css 預處理器把設計稿尺寸轉換為 vw 單位，包括文本， 布局高寬 ，間距等，使得這些元素能夠隨視口大小自適應調整。以 1080px 設計稿為基準，轉化的計算表示為

響應式設計 使得一個網站同時適配 多種設備 和 多個屏幕 ，讓網站的布局和功能隨用戶的使用環境（屏幕大小、輸出方式、設備/瀏覽器能力而變化），使其視覺合理，交互方式符合習慣。如使得內容區塊可伸縮與自由排布，邊距適應頁面尺寸，圖片適應比例變化，能夠自動隱藏/部分顯示內容，能自動折疊導航和菜單。

Ⅳ 移動端Web頁面適配方案（整理版）

@(概述)[基本概念|百分比|rem|vw/vh|響應式設計]

[TOC]

印刷行業常用單位，能夠使用測量設備測得的長度，等於 1/72 英寸。

像素密度，每英寸所擁有的像素數。值越高，顯示畫面細節越豐富。計算公式為：，其中和是解析度的寬高，是屏幕尺寸。

列印設備每英寸印刷出來的點有多少個，值越高，圖片越細膩。

設備物理像素和設備獨立像素比 ，即是指在理想布局寬度，使用多少個物理像素來渲染一個css像素。js中通過 window.devicePixelRatio 獲取，css中通過 -webkit-device-pixel-ratio , -webkit-min-device-pixel-ratio , -webkit-max-device-pixel-ratio 進行媒體查詢。

移動端涉及 布局視口 （Layout Viewport）、 視覺視口 （Visual ViewPort）和 理想視口 （Ideal ViewPort）。

與移動端web頁面適配有關的手機屏幕特性包括

硬體所支持的，屏幕每行的像素 * 每列的像素點數，單位是 px 。

設備獨立的，軟體可以達到的，個人理解是使得軟體/頁面在不同屏幕上顯示出來的效果一致。

手機屏幕對角線長度換算成英寸的大小

貼上源碼分析

視口是瀏覽器中用於呈現網頁的區域，移動端的視口通常指的是 布局視口

Ⅳ 怎樣低成本的實現網頁在移動端的適配

解決方案涉及到的知識點：
viewport
media query
Javascript window.matchMedia
響應式圖片
柵格布局
頂部導航
測試工具
iOS和Android自帶的瀏覽器都是基於webkit內核，所以我們可以使用viewport屬性和media query技術實現網站的響應性。

viewport
在<head>之中添加viewport元數據標簽。
width=device-width 實現屏幕適配，頁面繪制根據觸屏大小變化，保持一致。
initial-scale 表示初始縮放。
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0">

maximum-scale 表示最大縮放比例，1意味著不能進行縮放。
user-scalable=no 禁用頁面縮放（zooming）功能。禁用縮放後，用戶只能滾動屏幕，讓你的網站看上去更像原生應用。
注意，這種方式我們並不推薦所有網站使用，還是要看你自己的情況而定！
Js代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

media query
根據不同的解析度，引用不用的css

Css代碼
<link rel="stylesheet" type="text/css"
media="screen and (max-device-width: 480px)"
href="shetland.css" />

Bootstrap3的實現 http://v3.bootcss.com/css/#grid-media-queries ，
以下是LESS方法的實現
Js代碼
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Javascript window.matchMedia
用CSS3解決的確很方便，但某些場景下仍然需要JS技術。
Js代碼
if (window.matchMedia("(min-width: 400px)").matches) {
// The screen width is 400px or wider.
} else {
// The screen width is less than 400px.
}

狀態改變時監聽
Js代碼
function setup_for_width(mql) {
if (mql.matches) {
// The screen width is 400px or wider. Set up or change things
// appropriately.
} else {
// The screen width is less than 400px. Set up or change things
// appropriately.
}
}

var width_mql = window.matchMedia("(min-width: 400px)");
// Add a listener for when the result changes
width_mql.addListener(setup_for_width);
// And share the same code to set things up with our current state.
setup_for_width(width_mql);

Ⅵ 網頁要適配到手機上,還需要再設計一版手機頁面么

如果你想做一個手機客戶端，那麼你需要編寫相應的客戶端程序，並且在網站上要有相應的介面，比如，獲取標題的介面以及相關內容的介面。這個相對來說比較麻煩一些。如果你只是想做一個可以在手機上正常瀏覽的網站，那麼可以在你原有網站的基礎上，重新創建一個用於移動設備的樣式表，當通過手機等移動設備訪問時，載入相應的樣式表就行了。這樣相對簡單一些。

Ⅶ 百度站長怎麼做移動端適配

在站長平台，我們可以下拉看到自己的網站，在移動適配專區，還可以看到移動適配、app屬性和siteapp。其中移動適配屬於自建移動端網站，而app適配是網路自帶的一種移動端網站。

在移動適配的時候，可以看到有規則適配和url適配，都是在pc端和移動端進行一個橋梁的搭建。可以實現自動轉換。如，同一個頁面你用pc端看，和移動端看顯示內容各有差異。

下圖以規則適配—單條規則為例，根據上面的需求進行填寫。主要該注意的為，url表達式，（/w+）和（/d+）等，可以參考正則表達式規則，進行一一對應填寫。其中提交的url對，最好是收錄和排名較好的頁面，有助於規則的匹配成功。

以URl適配為例，這里需要注意的是，url對進行填寫的時候，需要是pc端和移動端進行一一對應，中間用「空格」隔開。其中url對的書寫也最好是收錄和排名較好的網頁。也可以直接上傳url文件，進行大批量的url對上傳。

不同的適配規則，在提交之後，顯示的是不一樣的。如下圖第一條的url適配，和第二條的規則適配。

適配關系規則提交之後，根據網站的排名流量以及適配規則的填寫等，可以看到提交後的處理狀態，會顯示「校驗成功」「校驗部分成功」「校驗失敗」「校驗中」等。如果校驗失敗也不用刪除，流量和排名上去之後，還可能校驗成功的。
步驟閱讀

閱讀全文

與網站怎麼設置移動設備適配相關的資料

熱點內容

steam令牌換設備了怎麼辦發布：2025-10-20 08:53:03 瀏覽：246

新生測聽力儀器怎麼看結果發布：2025-10-20 08:06:45 瀏覽：224

化學試驗排水集氣法的實驗裝置發布：2025-10-20 08:06:36 瀏覽：156

家用水泵軸承位置漏水怎麼回事發布：2025-10-20 08:02:45 瀏覽：131

羊水鏡設備多少錢一台發布：2025-10-20 07:49:13 瀏覽：125

機械制圖里型鋼如何表示發布：2025-10-20 07:48:18 瀏覽：19

測定空氣中氧氣含量實驗裝置如圖所示發布：2025-10-20 07:31:16 瀏覽：718

超聲波換能器等級怎麼分發布：2025-10-20 07:29:11 瀏覽：800

3萬軸承是什麼意思發布：2025-10-20 07:24:55 瀏覽：110

鑫旺五金製品廠發布：2025-10-20 07:24:52 瀏覽：861

蘇州四通閥製冷配件一般加多少發布：2025-10-20 07:19:14 瀏覽：153

江北全套健身器材哪裡有發布：2025-10-20 07:18:30 瀏覽：106

水表閥門不開怎麼辦發布：2025-10-20 07:01:00 瀏覽：109

花冠儀表盤怎麼顯示時速發布：2025-10-20 06:37:48 瀏覽：106

洗砂機多少錢一台18沃力機械發布：2025-10-20 06:36:07 瀏覽：489

超聲波碎石用什麼材料發布：2025-10-20 06:13:47 瀏覽：607

組裝實驗室製取二氧化碳的簡易裝置的方法發布：2025-10-20 06:06:14 瀏覽：165

怎麼知道天然氣充不了閥門關閉發布：2025-10-20 06:01:13 瀏覽：902

公司賣舊設備掛什麼科目發布：2025-10-20 05:58:06 瀏覽：544

尚葉五金機電發布：2025-10-20 05:32:44 瀏覽：59