<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

height=device-height ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例(初始规模为1.0倍，即原始大小)

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes或者1：表示用户是否可以调整缩放比例(no或者0：表示不可调整缩放比例)

target-densitydpi：

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

下面是 target-densitydpi 属性的 取值范围

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

为了防止Android Browser和WebView 根据不同屏幕的像素密度对你的页面进行缩放，你可以将viewport的target-densitydpi 设置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会根据当前屏幕的像素密度进行展示。在这种情形下，你还需要将viewport的width定义为与设备的width匹配，这样你的页面就可以和屏幕相适应。

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：

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

html -- <meta name="viewport"/>的更多相关文章

  1. span宽度高度设置

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. css span宽度和css span高度成功设置经验篇

    我们介绍两种情况下的对span宽度高度样式成功设置. 为了观察和实践CSS SPAN宽度和span高度成功设置,DIVCSS5新建一个css命名为“.divcss5”的盒子,设置css宽度为150px ...

  3. HTML设置span宽度

    CSS中的 width 属性并不总是有效的如果对象是 inline 对象,width 属性就会被忽略,Firefox 和 IE 是遵循CSS标准,因而直接设置span宽度会无效. 解决:span { ...

  4. 设置span 宽度的完美解决方案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 设置span的宽度

    设置span的宽度 在默认的情况下,利用css样式对span进行宽度设定是无效,但有时为了某种排版的要求,需要对span进行宽度设定,那么如何在html中利用css样式设定span的宽度? 思路:这看 ...

  6. ZH奶酪：CSS中限制span显示字数

    span中的文字是取出于数据库的,不确定文字的个数,由于排版的原因只想让span不超过6个字,如果超过只显示六个,当鼠标悬浮上去的时候tip显示全部内容 Step1.在span中添加title < ...

  7. css截断长文本显示

    实现 截断长文本显示处理,以前是通过后台的截取,但这种方法容易丢失数据,不利于SEO. 而通过前端css的截断,则灵活多变,可统一运用与整个网站. 这项技术主要运用了text-overflow属性,这 ...

  8. vue+node开发手机端h5页面开发遇到的坑

    项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...

  9. html&css中的文字对齐问题

    html&css的使用过程中,我们经常会遇到很多文字对齐问题.下面我要介绍一个有丁点难的文字对齐问题. 实现效果如下图所示.   两行长度不定的文字,要让它们总体水平居中,然后,这两行字要左对 ...

  10. CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

    http://www.52css.com/article.asp?id=602 ===================================================     html ...

随机推荐

  1. django中跨app引用model

    可能是自己水平的原因,总感觉跨django中app引用有点怪怪的,所以在自己没有达到另一个级别之前就先把正确的解决 方案记一下吧. 一.django中跨app引用model,以app02中的model ...

  2. Linux-Ubuntu操作记录

    ubuntu 基本命令 1.帮助man      --help简单的帮助  如:man tar 或者tar --help      help command 较详细的帮助      man comma ...

  3. SpringDaoSupport

    @Component public class SuperDAO extends HibernateDaoSupport { @Resource(name="sessionFactory&q ...

  4. vim编写Bash脚本

    vim编写Bash脚本,可以说是类unix系统下的原生应用啊,想到初vi编辑器可是每个unix自带的哦. 缩进:在.vimrc中添加 filetype plugin indent on 未完待续,以后 ...

  5. python3.3使用tkinter实现猜数字游戏代码

    发布时间:2014-06-18   编辑:www.jbxue.com 原文地址:http://www.jbxue.com/article/python/22152.html python3.3使用tk ...

  6. nyoj576 集齐卡片赢大奖（一）

    集齐卡片赢大奖(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 小时候你一定曾经为收集一套三国人物的卡片而买过不少零食吧?这些小吃的袋子里一般都会有一张卡片,如 ...

  7. Oracle中文字符乱码？设置Oracle客户端字符编码与服务端一致

    经常可能出现查询Oracle数据时,中文显示乱码,这很可能是因为,Oracle服务端的字符编码与客户端不一致引起的. 这时,我们需要做的是,如何设置自己的客户端字符编码与服务端一致. 查询Oracle ...

  8. Ribbon重试机制与Hystrix熔断机制的配置问题

    Ribbon超时与Hystrix超时问题,为了确保Ribbon重试的时候不被熔断,我们就需要让Hystrix的超时时间大于Ribbon的超时时间,否则Hystrix命令超时后,该命令直接熔断,重试机制 ...

  9. 一些有用的Sql语句

    1.插入数据后,返回插入的Id ')

  10. C++面向对象程序设计的一些知识点（4）

    摘要:累继承可以实现源代码重用,模板技术也可以达到同样的目的.模板可以分为函数模板和类模板,其共同点是允许参数类进行类型化,编译器根据程序员传递的具体类型,又把函数模板实例化为具体函数,把类模板实例化 ...