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

属性解释:

1.width

width设置viewport的宽度,即iphone最初模拟PC浏览器的宽度,之后iphone会这个宽度展现的页面同比缩放到iphone屏幕上。设置width=device-width后就不会再进行缩放了,因为宽度正好和iphone的宽度相同(前提是没有设置缩放比例)。

2.minimum-scale和maximum-scale

控制用户允许设置的缩放比例的。

3.user-scalable

标识是否允许对页面进行缩放,取值有两个yes和no。设置为no则不允许进行页面缩放了。
4.initial-scale

设置用户最初看到页面时的缩放比例。
5.target-densitydpi

Android 浏览器所需要的,因为 Android 硬件设备标准不一, 其中同样物理尺寸的屏幕,可能因为 dpi 的不同而具有不同的分辨率,
Android 浏览器默认会缩放页面以便最好地呈现, 可惜和 Java 的垃圾回收一样,它很难做到"最好"。所以最好还是人工指定吧。
target-densitydpi 可以设定的值
device-dpi - 设备本身的像素
high-dpi -用高像素,中低像素屏幕适当缩小。
medium- 中等像素,高的屏幕放大,低的变小是默认值
low-dpi - 低像素,中高像素会适当变大。

iPhone/android的viewport 禁止页面自动缩放的更多相关文章

  1. pc页面自动缩放到手机端

    今天做了个pc的页面,看了别人的网站在手机端能把pc端的网页刚好缩放到手机端,看着很舒服. 于是想把自己的页面也这样搞一下,刚开始,想到的是利用css3的缩放来做,想的是当屏幕尺寸改变时缩放整个页面, ...

  2. 点击<a>标签,禁止页面自动跳到顶部的解决办法

       最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...

  3. 苹果客户端input时页面自动放大的问题

    一.问题: 最近在用vue测试的时候发现,安卓端在输入框input时不存在页面自动缩放的问题,苹果客户端认为是考虑到用户的体验效果,才出现输入框自动放大的功能.但也收到了不少用户反馈体验效果不周. 二 ...

  4. pageresponse.min.js自动缩放页面改写

    /* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...

  5. 适应移动端 iPhone & Android 微信页面的一些css属性

    1.-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色 ...

  6. Android drawable的自动缩放

    今天在写程序时发现,一张图片被自动放大了,后来发现,这张图片放在了drawable-zh文件夹下,这个文件夹没有指定屏幕密度!于是将drawable-zh改为drawable-zh-nodpi,问题解 ...

  7. Android代码中动态设置图片的大小(自动缩放),位置

    项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...

  8. Android Oreo 8.0 新特性实战 Autosizing TextView --自动缩放TextView

    Android Oreo 8.0 新特性实战 Autosizing TextView --自动缩放TextView 8.0出来很久了,这个新特性已经用了很久了,但是一直没有亲自去试试.这几天新的需求来 ...

  9. JS自动缩放页面图片

    /** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int height 高度 * @param strin ...

随机推荐

  1. [HNOI 2018]毒瘤

    Description 题库链接 给出一个 \(n\) 个点 \(m\) 条边的无向图.求独立集个数. \(n\leq 10^5,n-1\leq m\leq n+10\) Solution 由于返祖边 ...

  2. C#语法之扩展

    扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用.这是msdn的描述.上面几句 ...

  3. sgsdg

    wrjow we wetwer werwer werwer werqw qweqwrq qwrqwr @ApiOperation("根据条件分页查询试卷") @ApiRespons ...

  4. 微信小程序头部栏实现

    效果如图: 也就是实现红色框的部分. wxml代码 <view class="header {{scrollDown?'scrolled':''}}"> <vie ...

  5. RxJS - Subject(转)

    Observer Pattern 观察者模式定义 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态 ...

  6. [PHP] 商品类型规格属性后台管理(代码流程备忘)

    实现界面 涉及到四张表,type(商品类型表),type_spec(商品类型规格关联表),attribute(商品属性表),attribute_value(商品属性值表) 新建基控制器BaseCont ...

  7. Java基础之Object类

    类Object是类层次结构的根类.每个类都直接或者间接地继承Object类.所有对象(包括数组)都实现这个类的方法.Object类中的构造方法只有一个,并且是无参构造方法,这说明每个类中默认的无参构造 ...

  8. Qt编译目录下exe文件执行报错问题的解决办法

    使用Qt5.9.3+vs2017环境,编译项目生成Debug目录,运行其中的exe文件,出现以下错误(qt creator调试状态下或出安装包后是可以运行的): 经过查阅资料,发现是我重新配置Qt开发 ...

  9. Postman Postman接口测试工具使用简介

    Postman接口测试工具使用简介 by:授客 QQ:1033553122 本文主要是对Postman这个接口测试工具的使用做个简单的介绍,仅供参考. 插件安装 1)下载并安装chrome浏览器 2) ...

  10. sqlserver为数据库表增加自增字段

     需求: 数据库为SQLServer.对已有的数据库表customer加一个序号字段,一次性对所有现存客户加上编号,并在新建客户时自动增加一个编号,数值自增1. 解决方法: 1. 复制表结构.把原 ...