2. 程式人生 > >web前段設計之痛：手機瀏覽器和pc瀏覽器的width:100%的自適應問題

web前段設計之痛：手機瀏覽器和pc瀏覽器的width:100%的自適應問題

阿新 • • 發佈：2019-01-07 
Tips: 除錯 iPad 或 iPhone 可在設定中啟動除錯模式，在 Mac 中的 Safari 瀏覽器 同樣開啟開發者模式後，進行聯機除錯。功能彪悍。

最近在做一個頁面時，發現在 iPad 的 Safari 瀏覽器中背景顯示不全，定位到該 div 後發現所指定 css 的寬度為 100% ；

到百度搜索後發現，safari 中 viewport 預設寬度為 980px，若事先未指定其初始 viewport 寬度，則會預設按照 980px 處理。

可以預設初始化 viewport 寬度或在 css 中設定 min-width，但最簡單的方法可以在 head 標籤中初始化好 viewport。

 

詳見下方程式碼：

<metaname="viewport"content="width=網頁真實寬度, initial-scale=倍數值"/> 
假設網頁寬度為 960px 或 1080px，可在width中加入該值，並將 initial-scale 設定一個適合的倍數值。

例如一個頁面的寬度為 1080px，則設定為：

<metaname="viewport"content="width=1080, initial-scale=0.9"/> 
這樣不管載入前後切換橫屏還是豎屏，都可以友好顯示。【可參考：
 
股票配資 手機端與pc端的瀏覽對比 】
可是比如頭部部分設定為width：100%，而網頁中部最大寬度為預設：1200px，頭部和中部長度不一致。這個問題在pc端和手機的預設畫素不一致造成。該如和解決？
找了很多資料，終於找出來了：

在網頁的<head>中增加以上這句話，可以讓網頁的寬度自動適應手機螢幕的寬度:

  1. <metaname="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes"/>
  2. <metaname
    ="apple-mobile-web-app-capable"content="yes"/>
  3. <metaname="format-detection"content="telephone=no"/>

第一行：width=device-width ：表示寬度是裝置螢幕的寬度
initial-scale=1.0：表示初始的縮放比例
minimum-scale=0.5：表示最小的縮放比例
maximum-scale=2.0：表示最大的縮放比例
user-scalable=yes：表示使用者是否可以調整縮放比例
第二行：
設定iphone端頁面全屏。
第三行：
取消數字被識別為電話號碼。

如果是想要一開啟網頁，則自動以原始比例顯示，並且不允許使用者修改的話，則是：

  1. <metaname="viewport"content="width=device-width（這裡是可以變化的，根據你的其他div的寬度來設定）, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

這樣子寫後，就可以把一些頁頭橫幅等的圖片的寬度都設定成style="width:100%"，整個頁面在裝置上看起來就是全屏的了。【要把width=device-width 中的device-width換成你中部設定的畫素值，比如我的設定為1200px】 這樣問題就解決了。

相關推薦

web前段設計之痛：手機瀏覽器和pc瀏覽器的width:100%的自適應問題

Tips: 除錯 iPad 或 iPhone 可在設定中啟動除錯模式，在 Mac 中的 Safari 瀏覽器 同樣開啟開發者模式後，進行聯機除錯。功能彪悍。 最近在做一個頁面時，發現在 iPad 的 Safari 瀏覽器中背景顯示不全，定位到該 div 後發現所指定 cs

SoC嵌入式軟件架構設計之三：代碼分塊(Bank)設計原則

post 介紹 讀寫 cor 層次 clas rom bank 分配 上一節講述了在沒有MMU的CPU(如80251、MIPS M控制器系列、ARM cortex m系列)上實現虛擬內存管理的集成硬件設計方法。新設計的內存管理管理單元要實現虛擬內存管理還須要

高效Web前端開發之路：YUI 3.15 PDF掃描版

瀏覽器 瀏覽器兼容 key 掃描 data- 第6章 必須 第5章 HR JavaScript是一種最初由Netscape的LiveScript發展而來的面向對象的Web腳本語言，被ECMA國際定義為國際化標準——ECMAScript。JavaScript具有使用局限

【轉】web app變革之rem（手機屏幕實現全適配）

理想 那種 內嵌 自己的 大屏幕 block 行業 尺寸 是我 以往web移動適配，常規寫法是：media only screen @media only screen and (min-device-width: 320px){ //針對iP

阿里雲伺服器的web專案釋出之路：（四）雲伺服器mysql資料庫的安裝

阿里雲伺服器安裝mysql的詳情步驟 1-1.通過登入伺服器，執行yum命令來實現相關的操作，語句如下所示： 安裝mysql: 第一步：下載rpm包 [[email protected] ~]# Retrieving http://dev.mysql

阿里雲伺服器的web專案釋出之路：（五）nodejs的安裝和專案部署詳細步驟

Nodejs如何部署在雲服務上 第一步：下載nodejs安裝包，並解壓壓縮包[解壓後預設在root下面] wget命令下載Node.js安裝包，該安裝包是編譯好的檔案，解壓之後，無需重複編 命令列：wget https://nodejs.org/dist/v6.

阿里雲伺服器的web專案釋出之路：（三）將web專案釋出到雲伺服器

1.配置阿里雲的安全組，主要是允許8080,80埠的訪問，這樣做的目的主要是為了能讓外網進行訪問，當然，這個地方也能設定專門網段訪問你的公網，配置如下所示 這個地方你也可以通過克隆的方式新增。 8080：被用於WWW代理服務的，可以實現網頁瀏覽，經常在訪問某個網站或使用代理伺服器的

阿里雲伺服器的web專案釋出之路：（二）雲伺服器tomcat及JDK的安裝

雲伺服器tomcat及JDK的安裝（步驟詳細，要軟體的留言喲） **準備工作：**遠端連線工具（xshell或者putty）,tomcat和JDK壓縮包 首先購買的伺服器你需要知道你伺服器的使用者名稱(root)和密碼（自己設定） 密碼設定的位置： 下載相關的伺服器遠端連線軟體（xsh

阿里雲伺服器的web專案釋出之路：（一）購買最優惠的阿里雲伺服器

1.準備工作：一個大學學生證身份資訊，一臺能上網的電腦，一個能繫結的手機； 具體步驟： A.百度搜索阿里雲翼計劃，這個是阿里針對學生的一項優惠政策，點選進去之後可以看到下面的這些選項 這個時候你可以選擇登入，沒有的話可以先註冊一個，註冊後登陸，完成實名認證和學生認證。 完成學生認證和

指尖下的js —— 多觸式web前端開發之三：處理複雜手勢

    這篇文章著重介紹多觸式裝置上特有的gesture event（android和iOS對這個事件的封裝大同小異）。這個事件是對touch event的更高層的封裝，和touch一樣，它同樣包括gesturestart，gesturechange，gestureend三個事件回撥：  gesture

指尖下的js ——多觸式web前端開發之二：處理簡單手勢

這篇文章將描述多觸式網頁開發中對手勢（Gesture）事件的處理。     水果裝置中的Gesture，廣義的說包括手指點選（click），輕拂（flick），雙擊（double-click），兩隻手指的分開、閉合（scale）、轉動（rotate）等一切手指能在螢幕上做的事情。iOS上設計了了一系列手勢來模

Java Web 學習筆記之八：嵌入式web伺服器Jetty的基本使用

Jetty 是一個開源的servlet容器，具有易用性，可擴充套件性，易嵌入性等特點。通過少量的程式碼，開發者就可以在程式中以嵌入的方式執行一個web伺服器。 下面介紹一些Jetty使用的方式：

Java Web基礎知識之Filter：過濾一切你不想看到的事情

不要相信客戶端， 所以做後端的人都應該銘記的事情。因為前端傳過來的資料並不總是合法和有效的，所以後端是對訪問資源的最後一道保護傘。之前我們在Spring中說到過AOP程式設計，AOP基礎知識，它就可以在執行我們的方法之前進行一些預處理和驗證來保護後端的資源。不難想到她的實現

Java Web基礎知識之安全：人生苦短，注意安全

關於web程式中的安全方面，想必大多數人都不甚瞭解，或者說感覺沒有必要了解，身邊開發網站的人主要就是注重後臺的功能和前臺的介面，不要說程式的安全問題，甚至後臺資料庫訪問的問題可能都沒有下大力氣解決。但是這又是和我們密切相關的一個問題，每天看到網站哪個系統或者網站又出現安全問

Java Web 學習筆記之二：Java HttpURLConnection保持會話的方法

在Java Web開發中，會話保持是伺服器識別客戶端（一般指瀏覽器）的方式。對此，各大瀏覽器都是支援會話保持的。然而在開發者通過Java API HttpURLConnection 開發網路請求工具的

【翻譯】動手動腦玩轉Web遊戲之三：人物動起來、敵人出現、自定義視角

讓角色動起來    當鍵盤上特定的按鍵被按下時，為了讓我們建立的角色同步地動起來，需要讓Gamma來為我們改變物件水平、垂直方向的位置狀態。在本章節，我們將實現如下功能： ·鍵盤上向左的方向鍵控制角色往左移動 ·鍵盤上向右的方向鍵控制角色往右

C++ Primer高速入門之六：數組和指針

borde ott 1.5 del word ans 12px 關聯 bre 更新：勘誤，delete [] 豬 我們知道，C語言以及早期的面向結構的語言差點兒都支持數組定義。比方整形數組int 女神[2]。表示有倆數: 女神[0], 女神[1]。她們都是

深入理解Tomcat系列之五：Context容器和Wrapper容器

ssa stream servlet實例 可用 igel sse ould rip alt 前言 Context容器是一個Web項目的代表，主要管理Servlet實例，在Tomcat中Servlet實例是以Wrapper出現的。如今問題是怎樣才幹通過C

Django運維後臺的搭建之五：引入databases和django-crispy-forms

連接 django databases 在上一篇，我們已經把我們做的運維外面套上了bootstrap框架，但是那僅僅是一個外殼，這一次是要把裏面的壤也扣上這樣的框架。首先，編輯index.html，添加block元素，用於主頁存放不同的內容：<div class="page-content"

自測之Lesson11：消息和消息隊列

nbsp 自測 讀取 set form msgrcv 編寫 recv string 題目：key及ftok函數的作用。 解答： key是用來創建消息隊列的一個參數，當兩個key相同時，創建消息隊列會引起“誤會”（除非有意為之）。所以我們可以通過ftok函數來獲得一個“不