蘋果(Safari)瀏覽器的圖片width設置為100%但實際顯示為980px改成的問題方法

来源:https://www.cnblogs.com/abc-x/archive/2020/07/29/13399544.html
-Advertisement-
Play Games

最近在做一個頁面時,發現在 iPad 的 Safari 瀏覽器中背景顯示不全,定位到該 div 後發現所指定 css 的寬度為 100% ; 到百度搜索後發現,safari 中 viewport 預設寬度為 980px,若事先未指定其初始 viewport 寬度,則會預設按照 980px 處理。 可 ...


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

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

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

在設置viewport前先來介紹一下html中viewport:

移動設備上的viewport是設備屏幕上用來顯示網頁的那部分區域,再具體一點就是瀏覽器上用來顯示網頁的那部分區域,但viewport又不局限於瀏覽器可視區域的大小,它可能比瀏覽器的可視區域大,也可能比瀏覽器的可視區域小。在預設情況下,移動設備上的viewport都是大於瀏覽器可視區域的,這是因為移動設備的解析度相對於PC來說都比較小,所以為了能在移動設備上正常顯示那些為PC瀏覽器設計的網站,移動設備上的瀏覽器都會把自己預設的viewport設為980px或1024px(也可能是其它值,由設備本身決定),但後果是瀏覽器出現橫向滾動條,因為瀏覽器可視區域的寬度比預設的viewport的寬度小。

viewport分為三種:

(1)layout viewport(佈局視窗)

layout viewport是網頁佈局的區域,它是<html>元素的父容器。只要你不在css中修改<html>元素的寬度,<html>元素的寬度就會撐滿layout viewport的寬度。

很多時候瀏覽器視窗沒有辦法顯示出layout viewport的全貌,但是它確實是已經被載入出來了,這個時候滾動條就出現了,你需要通過滾動條來瀏覽layout viewport其他的部分。

layout viewport用css像素來衡量尺寸,在縮放、調整瀏覽器視窗的時候不會改變。縮放、調整瀏覽器視窗改變的只是visual viewport。

在桌面瀏覽器中,縮放為100%的時候,Layout Viewport寬度等於內容視窗的寬度。(你幾乎不會在電腦上見過橫向滾動條,除非你調整縮放)

但是在移動端,縮放為100%的時候,Layout Viewport不一定等於內容視窗的大小。當你用手機瀏覽瀏覽寬大的網頁(這些網頁沒有採用響應式設計)的時候,你只能一次瀏覽網頁的一個部分,然後通過手指滑動瀏覽其他部分。這就說明整個網頁(Layout Viewport)已經載入出來了,只不過你要一部分一部分地看。

如果把移動設備上瀏覽器的可視區域設為viewport的話,某些網站會因為viewport太窄而顯示錯亂,所以這些瀏覽器就預設會把viewport設為一個較寬的值,比如980px,使得即使是那些為PC瀏覽器設計的網站也能在移動設備瀏覽器上正常顯示。這個瀏覽器預設的viewport叫做 layout viewport。layout viewport的寬度可以通過 document.documentElement.clientWidth來獲取。

(2)visual viewport(視覺視窗)

visual viewport就是顯示在屏幕上的網頁區域。通過前面的說明你應該已經知道visual viewport了:它往往只顯示layout viewport的一部分。visual viewport就像一臺攝像機,layout viewport就像一張紙,攝像機對準紙的哪個部分,你就能看見哪個部分。你可以改變攝像機的拍攝區域大小(調整瀏覽器視窗大小),也可以調整攝像機的距離(調整縮放比例),這些方法都可以改變visual viewport,但是layout viewport始終不變。

visual viewport用css像素來衡量尺寸,表示有多少個css像素能夠被用戶看到。

layout viewport的寬度是大於瀏覽器可視區域的寬度的,所以還需要一個viewport來代表瀏覽器可視區域的大小,這個viewport叫做 visual viewport。visual viewport的寬度可以通過 document.documentElement.innerWidth來獲取。

舉個慄子:
為了讓小小的手機屏幕也能夠瀏覽寬大的網頁(這些網頁沒有採用響應式設計),手機瀏覽器將layout viewport的預設寬度設為與電腦瀏覽器一樣,比如980px,1024px(單位:CSS像素)。由於手機的屏幕邏輯像素寬度一般只有300~400邏輯像素,因此需要將多個css像素由1個邏輯像素顯示(也就是縮小,千萬不要忘記縮放比例=css像素邊長/邏輯像素邊長),讓手機屏幕顯示的css像素與網頁的css像素一樣多了,也就是visual viewport = layout viewport。

(3)ideal viewport(理想視窗)

ideal viewport是一個能完美適配移動設備的viewport。首先,不需要縮放和橫向滾動條就能正常查看網站的所有內容;其次,顯示的文字、圖片大小合適,如14px的文字不會因為在一個高密度像素的屏幕里顯示得太小而無法看清,無論是在何種密度屏幕,何種解析度下,顯示出來的大小都差不多。這個viewport叫做 ideal viewport。

ideal viewport並沒有一個固定的尺寸,不同的設備有不同的ideal viewport。例如,所有的iphone的ideal viewport寬度都是320px,無論它的屏幕寬度是320還是640。

ideal viewport 的意義在於,無論在何種解析度的屏幕下,針對ideal viewport 而設計的網站,不需要縮放和橫向滾動條都可以完美地呈現給用戶。

下麵來介紹一下蘋果(Safari)瀏覽器的圖片width設置為100%但實際顯示為980px解決方法:

利用meta標簽對viewport進行控制

移動設備預設的viewport是layout viewport,,但在進行移動設備網站的開發時,需要的是ideal viewport。要得到ideal viewport,需要用到meta標簽。

head標簽中加入:

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

該meta標簽的作用是讓當前viewport的寬度等於設備的寬度,同時不允許用戶手動縮放。當然maximum-scale=1.0, user-scalable=0不是必需的,是否允許用戶手動播放根據網站的需求來定,但把width設為width-device基本是必須的,這樣能保證不會出現橫向滾動條。

meta viewport 的6個屬性:

width  設置layout viewport 的寬度,為一個正整數,或字元串"width-device"
initial-scale  設置頁面的初始縮放值,為一個數字,可以帶小數
minimum-scale  允許用戶的最小縮放值,為一個數字,可以帶小數
maximum-scale 允許用戶的最大縮放值,為一個數字,可以帶小數
 height  設置layout viewport 的高度,這個屬性並不重要,很少使用
user-scalable  是否允許用戶進行縮放,值為"no"或"yes", no 代表不允許,yes代表允許

width能控制layout viewport的寬度,如果不指定該屬性,layout viewport將預設為980px或1024px(也可能是其它值,由設備本身決定),如果把layout viewport的寬度設置為移動設備的寬度,那麼layout viewport將成為ideal viewport。

其實,要把當前的viewport寬度設為ideal viewport的寬度,既可以設置width=device-width,也可以設置initial-scale=1,但有一個小缺陷,就是width=device-width會導致iphone、ipad橫豎屏不分,initial-scale=1會導致IE橫豎屏不分,都以豎屏的ideal viewport寬度為準。所以,最完美的寫法兩者都寫上去, initial-scale=1 解決 iphone、ipad的缺陷,width=device-width解決IE的缺陷。

viewport設置移動端自適應的方法:

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

最後還有倆個meta屬性也可以瞭解下:

<meta name="apple-mobile-web-app-capable" content="yes" /> //  設定iphone端頁面全屏   
<meta name="format-detection" content="telephone=no" />// 取消數字被識別為電話號碼。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本系列基於阮一峰老師的《JavaScrip語言入門教程》或《JavaScript教程》記錄整理,教程採用知識共用 署名-相同方式共用 3.0協議。這幾乎是學習js最好的教程之一(去掉之一都不過分) 最好的教程而阮一峰老師又採用開源方式共用出來,之所以重新記錄一遍,一是強迫自己重新認真讀一遍學一遍;二 ...
  • 下麵介紹一下div嵌套div時margin不起作用的解決方案。 順便科普下margin的定義和用法。 div嵌套的HTML代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 下麵介紹幾種使用Css實現文字豎向排版的方法: 1.一個句子的豎向排列 如圖: <!DOCTYPE html> <html> <head> <title>test</title> <meta charset="UTF-8"> </head> <style> .one { width: 20px; m ...
  • 我們做登錄頁面時有時需要用戶名和密碼倆端對齊,這樣顯得美觀一點,下麵介紹一下幾種實現方法: 一、使用 text-align屬性(只相容谷歌、火狐瀏覽器): html <ul> <li>密碼</li> <li>用戶名</li> <li>身份證號</li> </ul> css ul li{ width: ...
  • 響應式網站、移動端頁面在DIV CSS佈局中對於圖片列表或圖片排版時,如果想要圖片按比例縮放,最簡單的就是把img寬度設為100%,不設置高度,高度就會自動跟著高度縮放。 但是如果要達到的效果是,要讓圖片的寬高要按一定的比例顯示,如1:1 、4:3 等,然而圖片尺寸不是這個比例,又不想讓圖片拉伸變形 ...
  • 在html中如果要把多餘的文字顯示為省略號,那麼有以下幾種方法: 單行文本: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt ...
  • 在很多網站上我們都看到input輸入框顯示提示文字,讓我們一起來看看如果在input輸入框中顯示提示文字。我們只需要在<input>標簽里添加:placeholder="提示文字即可",那麼如果要修改提示文字的樣式呢?可以這樣設置css樣式: <!DOCTYPE html> <html> <head ...
  • 在做表單提交時我們有時會遇到這樣的需求,在用戶沒有輸入必填信息點提交時提示文字需要改為我們想要的提示信息,那麼可以在input裡面增加這樣的語句: <input type="text" placeholder="您的姓名" required oninvalid="setCustomValidity( ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...