HTML適應手機瀏覽器寬度

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

?

  1. <meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?minimum-scale=0.5,?maximum-scale=2.0,?user-scalable=yes"?/>?????
  2. <meta?name="apple-mobile-web-app-capable"?content="yes"?/>????
  3. <meta?name="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. <meta?name="viewport"?content="width=device-width,?initial-scale=1.0,?minimum-scale=1.0,?maximum-scale=1.0,?user-scalable=no"?/>????


這樣子寫后,就可以把一些頁頭橫幅等的圖片的寬度都設置成style="width:100%",整個頁面在設備上看起來就是全屏的了。

轉載于:https://www.cnblogs.com/appcx/p/6897422.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/370604.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/370604.shtml
英文地址,請注明出處:http://en.pswp.cn/news/370604.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

css3畫圖那些事(三角形、圓形、梯形等)

閑來無事&#xff0c;寫寫圖形。當時鞏固一下css3吧.。前端小白&#xff0c;寫的不好還請前輩多指教。 三角形 { width: 0;height: 0;border-bottom: 140px solid red ;border-right: 70px solid transparent;border-left: 70px solid transparent; } 圓形 {width: 0px;height…

MyBatis教程– CRUD操作和映射關系–第1部分

CRUD操作 MyBatis是一個SQL Mapper工具&#xff0c;與直接使用JDBC相比&#xff0c;它極大地簡化了數據庫編程。 步驟1&#xff1a;創建一個Maven項目并配置MyBatis依賴項。 <project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema…

Java開發人員的升級之路

第一部分&#xff1a;對于參加工作一年以內的同學。恭喜你&#xff0c;這個時候&#xff0c;你已經擁有了一份Java的工作。這個階段是你成長極快的階段&#xff0c;而且你可能會經常加班。但是加班不代表你就可以松懈了&#xff0c;永遠記得我說的那句話&#xff0c;從你入行那…

docker 數據庫 mysql_在Docker中體驗數據庫之MySql

在上一篇在Docker中體驗數據庫之Mongodb之后&#xff0c;這次記錄一下在docker中安裝mysql。過程要比Mongodb麻煩一點……參考網址&#xff1a;https://dev.mysql.com/doc/refman/5.7/en/linux-installation-docker.htmlhttps://hub.docker.com/r/mysql/mysql-server/安裝過程如…

STL概覽——棧( stack )、隊列( queue )和優先級隊列( priority_queue)

棧&#xff08;stack&#xff09; stack是一種先進后出&#xff08;First In Last Out&#xff0c;FILO&#xff09;的數據結構&#xff0c;它只有一個口&#xff0c;平常在我們寫深度優先遍歷算法時&#xff0c;&#xff0c;就會用到棧&#xff0c;stack允許我們增加&#xff…

使用JMeter對異步HTTP / REST服務進行壓力/負載測試

盡管我一直在使用JMeter進行Web應用程序的壓力測試和負載測試好幾次&#xff0c;但我們還是花了一些時間才弄清楚如何使用該工具測試基于異步HTTP / REST的服務。 在我們這里&#xff0c;我是指一名程序員&#xff0c; Holger Staudacher &#xff0c;我很榮幸能與當前的一個項…

轉義字符的使用和功能python_Python中轉義符和格式符的混合使用,python,轉義字符,與,格式化...

# coding: utf-8 mon 麻辣小龍蝦 #周一麻辣小龍蝦 tue 宮保雞丁 #周二宮保雞丁 wed 水煮肉片 #周三水煮肉片 thu 果兒拌菜 #周四果兒拌菜 fri 小雞燉蘑菇 #小雞燉蘑菇 Cf_price 23 #麻辣小龍蝦價格 CK_price 12 #宮保雞丁價格 BM_price 32 #水煮肉片價格 MV_price 19 …

mock接口開發,excel(讀,寫,修改)

mock接口開發 首先需要安裝 Flask 模塊 &#xff1a;pip install flask 然后引用 from flask import request #想獲取到請求參數的話&#xff0c;就得用這個 lanxia flask.Flask(__name__) #把這個python文件當做一個web服務 lanxia.server(/login,[ post , get ] )#第…

web前端學習之ruby標記和rt/rp標記

ruby 標記定義ruby注釋&#xff08;中文注音或字符&#xff09;。ruby標記與rt標記一同使用。ruby標記由一個或多個字符&#xff08;需要一個解釋/發音&#xff09;和一個提供該信息的rt 標記組成&#xff0c;還包括可選的rp標記&#xff0c;定義當瀏覽器不支持ruby 標記時顯示…

mysql 5.7 udf http_mysql下mysql-udf-http效率測試小記

看到張宴的博客上關于"http/rest客戶端的文章"&#xff0c;怎樣安裝啥的直接都跳過&#xff0c;下面直接進入測試階段&#xff0c;測試環境&#xff1a;虛擬機復制代碼 代碼如下:[rootlocalhost ~]# uname -aLinux sunss 2.6.18-128.el5 #1 SMP Wed Jan 21 10:44:23 …

作為一名程序員,聊聊我們的現狀和未來

前言&#xff1a;互聯網這個高速發展的新興行業&#xff0c;注定是敢想敢干敢創新&#xff0c;耐勞耐操耐折騰年輕人的天下&#xff1f; 我們所在的互聯網行業&#xff0c;不斷地有新的公司冒出&#xff0c;有新的商業模式成形&#xff0c;有新的產品形態影響著大家的生活日常&…

適用于孩子,父母和祖父母的JBoss HornetQ –第1章

現在與HornetQ合作已經快4年了&#xff0c;我認為是時候分享我到目前為止所學知識的一部分了。 這篇文章的主要目的不是重寫官方文檔 &#xff0c;而是以簡單的方式闡明我們在PaddyPower中最常用的概念。 什么是HornetQ HornetQ是JMS實現。 JMS是一種面向消息的中間件API&am…

riot.js教程【四】Mixins、HTML內嵌表達式

前文回顧riot.js教程【三】訪問DOM元素、使用jquery、mount輸入參數、riotjs標簽的生命周期&#xff1b;riot.js教程【二】組件撰寫準則、預處理器、標簽樣式和裝配方法&#xff1b;riot.js教程【一】簡介&#xff1b; 共享Mixins 混合開發可以使你很好的復用代碼&#xff0c;如…

移動端判斷手機橫豎屏狀態

禁用用戶自動縮放功能&#xff1a; <meta name"viewport" content"widthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalable0"> 判斷橫豎屏狀態有兩種方法&#xff1a;css判斷、js判斷 (一)、css判斷橫屏還是豎屏 1、寫在同一個css文…

ubuntu dhcp ping 不通 自己_??2、DHCP安裝和配置

DHCP動態主機設置協議&#xff0c;是一個局域網的網絡協議&#xff0c;使用UDP協議工作&#xff0c;可以快速分配IP地址&#xff0c;解決內網IP不足、手動配置IP造成IP沖突以及內網機器多手工配置比較麻煩的問題。1.把win2008和win2003設置同一網段&#xff0c;網絡適配器—配置…

python秒數變日期_將pandas日期列轉換為已用秒數

新答案 將文本轉換為Timedeltadf[Origin Time(Local)] pd.to_timedelta(df[Origin Time(Local)]) df[Seconds] df[Origin Time(Local)].dt.total_seconds() 舊答案 考慮數據幀dfdf pd.DataFrame(dict(Datepd.date_range(2017-03-01, 2017-03-02, freq2H))) Date 0 2017-03-0…

mysql用一個表更新另一個表的方法

Solution 1: 修改1列(navicate可行) update student s, city c set s.city_name c.name where s.city_code c.code; Solution 2: 修改多個列 update a, b set a.titleb.title, a.nameb.name where a.idb.id Solution 3: 采用子查詢(navicate不可行) update student s set…

選擇您的Java EE 6應用服務器

我被問到的第一個問題是&#xff1a;“我們應該使用哪個Java EE應用服務器&#xff1f;”。 隨著Java EE 6的日益普及&#xff0c;新的兼容應用程序服務器獲得了認證。 當前的官方兼容性和認證矩陣列出了針對完全配置文件&#xff0c;Web配置文件或兩者認證的12種不同產品。 如…

串的基本計算

#include<stdio.h> #include<stdlib.h> //typedef int Status; #define Max 20 #define OK 1 #define ERROR 0 #define OVERLOE -2 typedef struct//堆分配表示串 { char *ch; int length; }HString; // int CreatHString(HString &H)//構造字符串 { H.length …

HTML表格屬性及簡單實例

這里主要總結記錄下表格的一些屬性和簡單的樣式&#xff0c;方便以后不時之需。 1、<table> 用來定義HTML的表格&#xff0c;具有本地屬性 border 表示邊框&#xff0c;border屬性的值必須為1或空字符串("")。該屬性不會控制邊框的樣式&#xff0c;而是由CSS來…