当前位置: 首页 > 编程日记 > 正文

手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport

viewport 语法介绍

<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = float_value ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
"/>

width
控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height
和 width 相对应,指定高度。


initial-scale
初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。


maximum-scale
最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。


user-scalable
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。
所有的缩放值都必须在0.01–10的范围之内。


示例1:设置屏幕宽度为设备宽度,禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,user-scalable=no" />


示例2:设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

target-densitydpi
一个屏幕像素密度是由屏幕分辨率决定的,通常定义为每英寸点的数量(dpi)。Android支持三种屏幕像素密度:低像素密度,中像素密度,高像素密度。一个低像素密度的屏幕每英寸上的像素点更少,而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。

device-dpi –使用设备原本的 dpi 作为目标 dp。 不会发生默认缩放。
high-dpi – 使用hdpi 作为目标 dpi。 中等像素密度和低像素密度设备相应缩小。
medium-dpi – 使用mdpi作为目标 dpi。 高像素密度设备相应放大, 像素密度设备相应缩小。 这是默认的target density.
low-dpi -使用mdpi作为目标 dpi。中等像素密度和高像素密度设备相应放大。
dpi-value - 指定一个具体的dpi 值作为target dpi. 这个值的范围必须在70–400之间

转载于:https://www.cnblogs.com/czzjin/p/11114830.html

相关文章:

PSM-省电模式(PowerSaving Mode)

PSM: PowerSaving Mode, 省电模式, 是R12引入的新feature, spec可以参考&#xff1a;3GPP 24.301-5.3.11 Powersaving mode 和 23.682-4.5.4 UEPower Saving Mode.在PSM模式下&#xff0c;网络无法到达UE&#xff0c;UE无法接受来自于网络的数据和请求&#xff0c;类似于关机&…

mysql keepalived低版本_Mysql+keepalived主主切换

Mysqlkeepalived主主切换一&#xff0c;环境介绍网络结构&#xff1a;VIP :192.168.1.30MYSQL A:192.168.1.21MYSQL B:192.168.1.22二、mysql主主同步要实现mysqlkeepalived主主切换&#xff0c;首先要实现的就是两台mysql服务器的主主同步&#xff0c;查看http://smalldeng.bl…

Android环境搭建和Android HelloWorld—Android开发环境搭建

Android_Android开发环境搭建-搭建Android的开发环境 1.我考虑先下载JDK7.0,在JDK的安装中&#xff0c;考虑一般SDK都是向上兼容的&#xff0c;于是选择了最高的版本7.0这里是我总结的详细的JDK配置以及路径配置的过程&#xff1a; JavaSDK安装&#xff1a;安装JDK.exe然后配置…

30个在线学习设计与开发的站点

转&#xff1a;http://www.w3cschool.cc/w3cnote/30-best-websites-to-learn.html

【07月01日】A股滚动市净率PB历史新低排名

2010年01月01日 到 2019年07月01日 之间&#xff0c;滚动市净率历史新低排名。 上市三年以上的公司&#xff0c;2019年07月01日市净率在30以下的公司。 来源&#xff1a;A股滚动市净率(PB)历史新低排名。 1 - XD中国石(SH601857) - 历史新低 - PB_TTM&#xff1a;1.03 - PE_TTM…

LTE-连接态下的DRX

C-DRX: Connectedmode DRX,连接态下的DRX UE在连接态下&#xff0c;如果没有数据传输的话&#xff0c;会根据DRX的规则停止监听PDCCH(监听PDCCH可参考&#xff1a;PDCCH),从而达到省电的目的。一个DRX周期包含On Duration 和Opportunity for DRX 两个时间段。3GPP - 36.321中示…

mvc mvp mvvm的区别与联系_MVC,MVP,MVVM比较以及区别(上)

MVC&#xff0c;MVP&#xff0c;MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式&#xff0c;以前只是对他们有部分的了解&#xff0c;没有深入的研究过&#xff0c;对于一些里边的概念和区别也是一知半解。现在一边查资料&#xff0c;并结合自己的理解&#xff0c;来谈一…

【性格心理学】为什么我在关键时刻总是紧张?

为什么我在关键时刻总是紧张&#xff1f; ~这是一种“对人恐惧症”&#xff0c;因为害怕失败~ 当在众人面前讲话时&#xff0c;或者公司会议中轮到自己发言时&#xff0c;有的人就会大汗淋漓、面红耳赤&#xff0c;甚至心跳不已&#xff0c;结结巴巴地连话都说不出来。在重大场…

iOS图片模糊效果

增加 CoreImage.framework CoreGraphic.framework 等库 在使用时引入&#xff1a;#import <Accelerate/Accelerate.h> &#xff0c;支持iOS 5.0 及以上。 -(void)show { UIImage* img [self getBlurImage:[UIImage imageNamed:"Default-568h.png"]]; [_bgIm…

YOLOv7-Pose 姿态估计-环境搭建和推理

终端,进入base环境,创建新环境,我这里创建的是p38t17(python3.8,pytorch1.7)安装pytorch:(网络环境比较差时,耗时会比较长)下载好后打开yolov7-pose源码包。imgpath:需要预测的图片的存放路径。modelpath:模型的存放路径。Yolov7-pose权重下载。打开工程后,进入设置。

分治——最近点对问题 hdu1007

问题描述 n个点在公共空间中&#xff0c;求出所有点对的欧几里得距离最小的点对。 解法1&#xff1a; 很明显的&#xff0c;暴力解决是$O(N^2)$ 解法2&#xff1a; 利用分治的思想&#xff0c;我们可以把算法优化到$O(nlogn*logn)$&#xff0c;甚至$O(nlogn)$ 我们先对所有的点…

NBIOT-NPSS/NSS/NPBCH的资源位置

1.NPSSNarrowbandPrimary Synchronization Signal时域位置每1个SFN存在一个NPSSSFNSubframeSymbol长度每个SFN5最后11个symbol11个symbols频域位置NB-IOT下行带宽固定180kHz&#xff0c;一个PRB&#xff0c;12个子载波。NPSS信号占用11个子载波2.NSSSNarrowbandSecondary Synch…

数组的排序与查找

/**对如下一个数组int[] iarr{34,67,1,56,32,78,12,45,79,4,57,102,123,3};进行排序(采用自己擅长的排序算法)&#xff0c;然后查询排序之后的采用二分查找*法查找45在在数组的索引值 &#xff0c;排序、查找封装成方法&#xff0c;然后在main方法中调用测试。*/ public class …

0基础学好python难不难_零基础学习Python难不难?Python有什么优势?

原标题&#xff1a;零基础学习Python难不难&#xff1f;Python有什么优势&#xff1f;Python是一种计算机程序设计语言。首先&#xff0c;我们普及一下编程语言的基础知识。用任何编程语言来开发程序&#xff0c;都是为了让计算机干活&#xff0c;比如下载一个MP3&#xff0c;编…

浅谈 MySQL 子查询及其优化

2019独角兽企业重金招聘Python工程师标准>>> 使用过oracle或者其他关系数据库的DBA或者开发人员都有这样的经验&#xff0c;在子查询上都认为数据库已经做过优化&#xff0c;能够很好的选择驱动表执行&#xff0c;然后在把该经验移植到mysql数据库上&#xff0c;但是…

[PHP] JQuery+Layer实现添加删除自定义标签代码

JQueryLayer实现添加删除自定义标签代码 实现效果如下&#xff1a; 实现代码如下&#xff1a; <!doctype html> <html> <head> <meta charset"utf-8"> <title>实用的文章自定义标签</title> <link rel"stylesheet"…

NB-IOT: Anchor Carrier 锚点载波

Anchor Carrier定义&#xff1a; Anchor carrier:in NB-IoT, a carrier where the UE assumes that NPSS/NSSS/NPBCH/SIB-NB are transmitted. Anchor carrier用以发送NPSS/NSSS/NPBCH/SIB-NB&#xff0c; 另外寻呼消息和随机接入过程也只能在AnchorCarrier上进行。 在使用I…

mysql8 my 010457_分享一下我在mysql5.6+mysql8数据库安装过程中的一些坑!

Mysql5.6安装下载好安装包后&#xff0c;在bin目录下用cmd打开&#xff0c;输入mysqld install 【服务名】新建个服务在windowsr输入services.msc即可查看服务怎样使用mysql在本地电脑上安装好mysql服务器后&#xff0c;使用命令开启mysql服务&#xff0c;命令为net start mysq…

14年12月CCF真题1-门禁系统

问题描述 涛涛最近要负责图书馆的管理工作,需要记录下每天读者的到访情况。每 位读者有一个编号,每条记录用读者的编号来表示。给出读者的来访记录,请 问每一条记录中的读者是第几次出现。 输入格式 输入的第一行包含一个整数n,表示涛涛的记录条数。 第二行包含n个整数,依次表…

[Oracle] - 性能优化工具(5) - AWRSQL

在AWR中定位到问题SQL语句后想要了解该SQL statement的详细运行计划&#xff0c;于是就用AWR报告中得到的SQL ID去V$SQL等几个动态性能视图中查询&#xff0c;但发现V$SQL或V$SQL_PLAN视图都已经找不到相应SQL ID的记录&#xff0c;一般来说这些语句已经从shared pool共享池中被…

三种基本排序的实现及其效率对比:冒泡排序、选择排序和插入排序

1 public class ThreeTypesOfBaseSort {2 // 三种基本排序的效率对比 3 public static void main(String[] args) {4 ThreeTypesOfBaseSort sort new ThreeTypesOfBaseSort();5 6 // 测试百万级别的数组排序&#xff0c;看三种基本排序的的效率差…

NB-IOT UE的小区接入过程

NB-IOT UE的小区接入过程如下&#xff1a;NPSS/NSSS/NPBCH的时频资源&#xff0c;可以参考&#xff1a;点击打开链接 下面详细介绍一下MIB-NB/SIB1-NB的获取过程。 MIB-NB传输 在sharetechnote中有详细的描述&#xff0c;如下&#xff1a; MIB-NB分成8个等长的可以独立编码的子…

android用户界面之菜单(Menu)教程实例汇总

一、Menu的基本介绍1.从头学Android之Menu选项菜单 http://www.apkbus.com/android-13930-1-1.html 2.Android 界面之Menu菜单的特性 http://www.apkbus.com/android-664-1-1.html 3.Android XML中自定义菜单 http://www.apkbus.com/android-50884-1-1.html 4.Android 基础菜单…

nosql mysql mongodb_关于NoSQL之MongoDB的一些总结

NoSQL已经流行了很长一段时间&#xff0c;那么究竟是什么场景下你才更需要用到这些“新兴事物”&#xff0c;就比如MongoDB&#xff1f;下面是一些总结&#xff1a;你期望一个更高的写负载默认情况下&#xff0c;对比事务安全&#xff0c;MongoDB更关注高的插入速度。如果你需要…

下载文件乱码问题

1.下载文件乱码问题 new String("免责声明.pdf".getBytes("utf-8"), "ISO-8859-1")&#xff1b; 2.图片转blog String path request.getSession().getServletContext().getRealPath("/"); String a picturename2…

MySQL全面优化,速度飞起来

在进行MySQL的优化之前&#xff0c;必须要了解的就是MySQL的查询过程&#xff0c;很多查询优化工作实际上就是遵循一些原则&#xff0c;让MySQL的优化器能够按照预想的合理方式运行而已。 图-MySQL查询过程 一、优化的哲学 注&#xff1a;优化有风险&#xff0c;涉足需谨慎 1、…

LTE - PRACH 时频资源介绍

PRACH&#xff1a; Physical Random Access Channel. PRACH用于传输random access preamble RA-preamble Format 一共包含4种格式&#xff0c;其中format0-3 用于frametype 1(FDD), format 0-4 用于frametype 2(TDD). spec: 36.211- table5.7.1-1另外参考sharetechnote&#xf…

对面向对象基本原则的总结

&#xff08;一&#xff09;代理模式 应用场景&#xff1a;当一个类的某些功能需要由别的类来实现&#xff0c;但是又不确定具体会是哪个类实现。 优势&#xff1a;解耦合 敏捷原则&#xff1a;开放-封闭原则 实例&#xff1a;tableview的 数据源delegate&#xff0c;通过和pro…

python turtle画画 30排以内_Python竟能画这么漂亮的花,帅呆了(代码分享)

阅读本文大概需要3分钟关于函数和模块讲了这么久&#xff0c;我一直想用一个好玩有趣的小例子来总结一下&#xff0c;同时也作为实战练习一下。趣味编程其实是最好的学习途径&#xff0c;回想十几年前我刚毕业的时候&#xff0c;第一份工作就给手机上写app&#xff0c;当时觉得…

关于Windows 2003下开启防火墙后不能通过FTP问题解决

在Windows server 2003上做了个基于IIS的FTP服务。但是不久就发现一个问题&#xff0c;当系统开启防火墙后在其它机子上不能登录FTP服务器&#xff0c;但是又不想把Windows的防火墙晾起来&#xff0c;所以就尝试下突破这个限制。当时做了两步处理&#xff1a;&#xff08;1&…