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

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

最近在做一個頁面時,發現在 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" />// 取消數字被識別為電話號碼。

 


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

更多相關文章
  • 本系列基於阮一峰老師的《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( ...
一周排行
  • 比如要拆分“呵呵呵90909086676喝喝999”,下麵當type=0返回的是中文字元串“呵呵呵,喝喝”,type=1返回的是數字字元串“90909086676,999”, private string GetStrings(string str,int type=0) { IList<strin ...
  • Swagger一個優秀的Api介面文檔生成工具。Swagger可以可以動態生成Api介面文檔,有效的降低前後端人員關於Api介面的溝通成本,促進項目高效開發。 1、使用NuGet安裝最新的包:Swashbuckle.AspNetCore。 2、編輯項目文件(NetCoreTemplate.Web.c ...
  • 2020 年 7 月 30 日, 由.NET基金會和微軟 將舉辦一個線上和為期一天的活動,包括 微軟 .NET 團隊的演講者以及社區的演講者。本次線上大會 專註.NET框架構建微服務,演講者分享構建和部署雲原生應用程式的最佳實踐、模式、提示和技巧。有關更多信息和隨時瞭解情況:https://focu... ...
  • #abp框架Excel導出——基於vue #1.技術棧 ##1.1 前端採用vue,官方提供 UI套件用的是iview ##1.2 後臺是abp——aspnetboilerplate 即abp v1,https://github.com/aspnetboilerplate/aspnetboilerp ...
  • 前言 本文的文字及圖片來源於網路,僅供學習、交流使用,不具有任何商業用途,版權歸原作者所有,如有問題請及時聯繫我們以作處理。 作者:碧茂大數據 PS:如有需要Python學習資料的小伙伴可以加下方的群去找免費管理員領取 input()輸入 Python提供了 input() 內置函數從標準輸入讀入一 ...
  • 從12年到20年,python以肉眼可見的趨勢超過了java,成為了當今It界人人皆知的編程語言。 python為什麼這麼火? 網路編程語言搜索指數 適合初學者 Python具有語法簡單、語句清晰的特點,這就讓初學者在學習階段可以把精力集中在編程對象和思維方法上。 大佬都在用 Google,YouT ...
  • 在社會上存在一種普遍的對培訓機構的學生一種歧視的現象,具體表現在,比如:當你去公司面試的時候,一旦你說了你是培訓機構出來的,那麼基本上你就涼了,那麼你瞞著不說,然後又通過了面試成功入職,但是以後一旦在公司被髮現有培訓經歷,可能會面臨被降薪,甚至被辭退,培訓機構出來的學生,在用人單位眼裡就是能力低下的 ...
  • from typing import List# 這道題看了大佬寫的代碼,經過自己的理解寫出來了。# 從最外圍的四周找有沒有為O的,如果有的話就進入深搜函數,然後深搜遍歷# 判斷上下左右的位置是否為Oclass Solution: def solve(self, board: List[List[s ...
  • import requests; import re; import os; # 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537.36 (KHTML, li ...
  • import requests; import re; import os; import parsel; 1.請求網頁 header = { "user-agent":'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/537. ...