iPhone/android的viewport 禁止页面自动缩放
<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 禁止页面自动缩放的更多相关文章
- pc页面自动缩放到手机端
今天做了个pc的页面,看了别人的网站在手机端能把pc端的网页刚好缩放到手机端,看着很舒服. 于是想把自己的页面也这样搞一下,刚开始,想到的是利用css3的缩放来做,想的是当屏幕尺寸改变时缩放整个页面, ...
- 点击<a>标签,禁止页面自动跳到顶部的解决办法
最近在开发一个小web的时候想给一个按钮增加一个弹出dialog功能,但是发现点击按钮后页面总是自动滚动至顶部,这点从用户体验上来讲是极其不爽的,于是开始跳进google大池寻求解决办法.网上的 ...
- 苹果客户端input时页面自动放大的问题
一.问题: 最近在用vue测试的时候发现,安卓端在输入框input时不存在页面自动缩放的问题,苹果客户端认为是考虑到用户的体验效果,才出现输入框自动放大的功能.但也收到了不少用户反馈体验效果不周. 二 ...
- pageresponse.min.js自动缩放页面改写
/* * 名称 :移动端响应式框架 * 作者 :白树 http://peunzhang.cnblogs.com * 版本 :v2.1 * 日期 :2015.10.13 * 兼容 :ios 5+.and ...
- 适应移动端 iPhone & Android 微信页面的一些css属性
1.-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色 ...
- Android drawable的自动缩放
今天在写程序时发现,一张图片被自动放大了,后来发现,这张图片放在了drawable-zh文件夹下,这个文件夹没有指定屏幕密度!于是将drawable-zh改为drawable-zh-nodpi,问题解 ...
- Android代码中动态设置图片的大小(自动缩放),位置
项目中需要用到在代码中动态调整图片的位置和设置图片大小,能自动缩放图片,用ImageView控件,具体做法如下: 1.布局文件 <RelativeLayout xmlns:android=&qu ...
- Android Oreo 8.0 新特性实战 Autosizing TextView --自动缩放TextView
Android Oreo 8.0 新特性实战 Autosizing TextView --自动缩放TextView 8.0出来很久了,这个新特性已经用了很久了,但是一直没有亲自去试试.这几天新的需求来 ...
- JS自动缩放页面图片
/** * 缩略图 * * @param bool isScaling 是否缩放 * @param int width 宽度 * @param int height 高度 * @param strin ...
随机推荐
- [HNOI 2018]毒瘤
Description 题库链接 给出一个 \(n\) 个点 \(m\) 条边的无向图.求独立集个数. \(n\leq 10^5,n-1\leq m\leq n+10\) Solution 由于返祖边 ...
- C#语法之扩展
扩展方法使你能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用.这是msdn的描述.上面几句 ...
- sgsdg
wrjow we wetwer werwer werwer werqw qweqwrq qwrqwr @ApiOperation("根据条件分页查询试卷") @ApiRespons ...
- 微信小程序头部栏实现
效果如图: 也就是实现红色框的部分. wxml代码 <view class="header {{scrollDown?'scrolled':''}}"> <vie ...
- RxJS - Subject(转)
Observer Pattern 观察者模式定义 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态 ...
- [PHP] 商品类型规格属性后台管理(代码流程备忘)
实现界面 涉及到四张表,type(商品类型表),type_spec(商品类型规格关联表),attribute(商品属性表),attribute_value(商品属性值表) 新建基控制器BaseCont ...
- Java基础之Object类
类Object是类层次结构的根类.每个类都直接或者间接地继承Object类.所有对象(包括数组)都实现这个类的方法.Object类中的构造方法只有一个,并且是无参构造方法,这说明每个类中默认的无参构造 ...
- Qt编译目录下exe文件执行报错问题的解决办法
使用Qt5.9.3+vs2017环境,编译项目生成Debug目录,运行其中的exe文件,出现以下错误(qt creator调试状态下或出安装包后是可以运行的): 经过查阅资料,发现是我重新配置Qt开发 ...
- Postman Postman接口测试工具使用简介
Postman接口测试工具使用简介 by:授客 QQ:1033553122 本文主要是对Postman这个接口测试工具的使用做个简单的介绍,仅供参考. 插件安装 1)下载并安装chrome浏览器 2) ...
- sqlserver为数据库表增加自增字段
需求: 数据库为SQLServer.对已有的数据库表customer加一个序号字段,一次性对所有现存客户加上编号,并在新建客户时自动增加一个编号,数值自增1. 解决方法: 1. 复制表结构.把原 ...