viewport简介
Viewport的用处:手机拥有了浏览器的初期,人们并没有专门为移动设备
设计页面,造成的直接结果就是,访问的页面是直接将电脑页面
进行缩放,操作起来有诸多不便,viewport
就是用来解决这个问题的
1、viewport的概念:移动设备上,用来显示网页的区域.
- 如果把移动设备的浏览器(也有可能是app中的webview) ,当做相框的话
- viewport就相当于相框中的画,可能会比相框小,可能会比相框大,如果刚好一样大,那就皆大欢喜.
2、修改viewport:我们可以通过meta标签去修改viewport的值,防止滚动条出现,提升用户体验
- 移动web常见设置<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- 该属性最早是苹果公司在Safari中推出用来解决移动设备的viewport问题的.后来被各大安卓以及浏览器厂商效仿,所以说这个属性真的是非常有用的
3、可选值
- width:设置layout viewport 的宽度,为一个正整数,或字符串" device- width"
- initial-scale:设置页面的初始缩放值,为一个数字,可以带小数
- minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数
- maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数
- height:设置layout viewport 的高度,这个属性对我们并不重要,很少使用
- user-scalable:是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
viewport简介的更多相关文章
- 移动前端第一弹:viewport详解
前言 这次想聊聊移动开发相关的事.是的,你没有看错,一句话就可以开始你的移动前端开发. 你心里一定在想,什么话这么酷,能够瞬间带入到移动前端开发的世界. 但其实它一点也不新奇,不复杂. viewpor ...
- jquery简介和实例
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. 参考:http://www.php100 ...
- jQuery Mobile_公司简介
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name ...
- 移动终端学习1:css3 Media Queries简介
移动终端学习之1:css3 Media Queries简介 1.简介 这篇文章写的不错,我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-qu ...
- 移动终端学习一:css3 Media Queries简介
移动终端学习之一 css3 Media Queries简介 1.简介 别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...
- 转: 关于viewport的理解
最近我做了一点儿针对手机的Web开发和相关研究.按说,Web自设计之初,就已经考虑了设备无关性.然而,现实总是不尽如人意. 我们知道大多数网页都是针对桌面显示器开发和测试的,但是手机屏幕通常要比桌面显 ...
- Bootstrap3 栅格系统-简介
Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义类,还有强大的mixin 用于生成更具 ...
- rem 原理与简介
一.rem 原理与简介 字体单位: 值根据 html 根元素大小而定,同样可以作为宽度,高度等单位 适配原理: 将 px 替换为 rem,动态修改 HTML 根元素的 font-siz ...
- Bootstrap学习(一):Bootstrap简介
一.Bootstrap简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更 ...
随机推荐
- DES加密原理
DES加密步奏: 1.初始化两个字符串,一个为指定的秘钥,一个为初始化向量,要求是8个字符. 2.加密:秘钥.向量.需加密的字符串传换成byte[]类型: 声明加密标准类,DESCryptoServi ...
- Super Jumping! Jumping! Jumping!---hdu1087(动态规划)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1087 题意就是给你n个数,找出某个序列的最大和,这个序列满足依次增大的规则: 哎,这个题之前做过,但是 ...
- 我的Android进阶之旅------>解决Error:Unable to find method 'org.gradle.api.internal.project.ProjectInternal.g
错误描述 今天在Github上面下载了一份代码,然后导入到Android Studio中直接报了如下图所示的错误: 错误描述如下: Error: Unable to find method 'org. ...
- 安装RabbitMQ3.6.10报错:{error,{missing_dependencies,[crypto,ssl],
参考https://blog.csdn.net/u010739551/article/details/80848993 如果安装上篇博文安装则可避免这种情况 CentOS6.7安装RabbitMQ3. ...
- Django web 框架
目录 与Django的第一次见面 安装.文件解释与基本命令 Settings Models Views 路由系统 模板 Form表单 Cookie与Session CSRF防护
- APP中关于Android和IOS与网页交互
安卓交互: //安卓js代码start function bntcat(){ if(isAndroid){ musicPause() } var str = '{"tips":20 ...
- linux内核打印级别
1.printk()是一个内核的一个记录日志的机制,经常用来记录信息或者警告.printk可以指定输出日志的优先级,在include/linux/kern_levels.h中有相应的宏定义 #defi ...
- Mark一下 mysql 误删除root用户的解决方法
今天学习mysql用户管理,不小心将mysql.user表中的root用户给删掉了,然后就无法登录mysql了,网上找到了linux下的解决方法,我做了简单的修改,改成了我的windows版,恢复方法 ...
- 快速排序算法C语言版
快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比 ...
- PHP数组的创建
案例: 仔细看代码,PHP创建数组 <?php $names[0]='Peter'; $names[1]='Minot'; $names[2]='Smith'; echo $names[0].' ...