移动端网页开发 meta 之 viewport
这几天在搞微信公众平台,涉及到几个页面要写,可是当我测试时发现和想象中不太一样,于是去找了几个页面看了下,发现他们页面头部有 meta viewport 的标签,所以去找了下网上的资料,发现千篇一律,而且有的排版极其难看,所以我复制过来自己重新排版下、
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- width :
- 控制viewport的大小,可以指定一个值,如600, 或者特殊的值,如device-width为设备的宽度(单位为缩放为100%的CSS的像素)
- height :
- 和width相对应,指定高度
- initial-scale :
- 初始缩放比例,页面第一次加载时的缩放比例
- maximum-scale :
- 允许用户缩放到的最大比例,范围从0到10.0
- minimum-scale :
- 允许用户缩放到的最小比例,范围从0到10.0
- user-scalable :
- 用户是否可以手动缩放,值可以是:yes/true允许用户缩放;no/false不允许用户缩放
移动端网页开发 meta 之 viewport的更多相关文章
- 移动端网页常用meta
今天在对前公司的某直播室前端进行改版时,整理了一下平时移动端页面开发时,最常用的meta.如下: <!--定义页面制作者,可以留姓名,也可以留联系方式--> <meta name=& ...
- 微信或移动端网页的meta
针对微信: <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> ...
- HTML5 Mobile 适应移动端的屏幕<meta name='viewport' content='xxxx'>
网页手机wap2.0网页的head里加入下面这条元标签,在移动端的浏览器中页面将以原始大小显示,并不允许缩放. 加入 如下代码 即可自适应移动端的屏幕: <meta name="vie ...
- 移动web开发--meta 之 viewport
常用的 viewport meta 如下: 1 <meta name="viewport" content="width=device-width,initial- ...
- 移动端web开发初探之Vuejs的简单实战
这段时间在做的东西,是北邮人论坛APP的注册页.这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用.因此实际上就是在做移动端的web开发了. 在这过程中遇到了不少有意思的东西. DEMO的git ...
- 从零开始学 Web 之 移动Web(二)JD移动端网页,移动触屏事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 移动端网页宽度值(未加meta viewport标签)
移动端网页宽度值(未加meta viewport标签): iphone:980px Galaxy(盖乐世):980px Nexus:980px blackberry(黑莓):980px LG:980p ...
- h5 移动端开发自适应 meta name="viewport"的使用总结
本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度: 设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...
- 移动端开发(一. Viewport(视窗))
手机与浏览器 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 ...
随机推荐
- shell脚本之基础
配置启动界面 vim /etc/inittab/ init3配置网卡 重启生效system-config-network网卡配置文件vim /etc/sysconfig/network-script ...
- DFA化简
首先是未化简DFA的转换表 NFA状态 DFA状态 a b {0,1,2,4,7} A B C {1,2,3,4,6,7,8} B B D {1,2,4,5,6,7} C B C {1,2,4,5,6 ...
- 《Linux内核分析》第三周笔记 构造一个简单的Linux系统MenuOS
构造一个简单的Linux系统MenuOS 一.linux内核源代码简介 三大法宝(存储程序计算机.函数调用堆栈.中断)和两把宝剑(中断上下文的切换:保存现场和恢复现场.进程上下文的切换) 1.在lin ...
- hibernate 创建工厂类
package cn.hibernate; import org.hibernate.SessionFactory; import org.hibernate.cfg.Configuration; / ...
- C#简述(二)
详情请参考:http://www.runoob.com/csharp/csharp-operators.html 1.C# 运算符 算术运算符 关系运算符 逻辑运算符 位运算符 赋值运算符 其他运算符 ...
- Alpha 冲刺六
团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 今天没有进行站立式会议,由于团队内有些细节 ...
- PAT 甲级 1068 Find More Coins
https://pintia.cn/problem-sets/994805342720868352/problems/994805402305150976 Eva loves to collect c ...
- Confluence的简单安装以及与jira链接(Confluence不知道有没有破解)
1. 前提是安装好了jira以及下载好了confluence的安装包 这里 jira的版本是 7.2.4 confluence的版本是6.8 2. 服务器上面有sqlserver数据库. 3. 为了便 ...
- Android Tab类型主界面 Fragment+TabPageIndicator+ViewPager
文章地址: Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager 1.使用ViewPager + PagerAdapter 每个页面的内容都 ...
- SpringBoot 5.SpringBoot小知识讲解
1.修改 server 端口: 在 application.properties 中添加 server.port=9090,我们的端口号就会变成9090了. 2.自定义配置Web: 2.1 创建 Cu ...