使用 viewport meta 标签在手机浏览器上控制布局
2023-06-13 09:18:34 时间
什么是Viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局),用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最新引进了 viewport 这个 meta tag,让网页开发者来控制 viewport 的大小和缩放,其他手机浏览器也基本支持。
Viewport 基础
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 height:和 width 相对应,指定高度。 initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。 maximum-scale:允许用户缩放到的最大比例。 minimum-scale:允许用户缩放到的最小比例。 user-scalable:用户是否可以手动缩放
Viewport 参考资料
Mozilla 开发者博客上有 viewport 使用教程。
相关文章
- 19-Nginx控制浏览器缓存与上游静态资源缓存
- Java多线程控制的心得
- LyScriptTools 调试控制类API接口手册
- 【Shell】算术运算符、流程控制、函数使用、数组以及加载其它文件的变量
- 【笔记】在HTML中用meta控制浏览器默认模式
- JS控制浏览器全屏详解编程语言
- 自开发程序加权限控制(SU21创建权限对象、PFCG创建Role)详解编程语言
- 主机上的Oracle控制文件的位置(oracle控制文件在哪)
- Oracle控制文件管理的注意事项(oracle控制文件内容)
- 轻松控制网络流量:Linux 限制流量教程(linux限制流量)
- MySQL触发器权限管理:如何设置用户权限以控制触发器的使用?(mysql触发器权限)
- 利用 Oracle 中的分支语句控制程序流程(oracle中分支语句)
- 通过Redis路由表精确控制请求分发(redis路由表)
- 控制红色之美从Redis获得全部控制权(redis获得全部可以)
- 用PHP的ob_start();控制您的浏览器cache!
- 用PHP控制用户的浏览器--ob*函数的使用说明
- JS控制CSS样式表
- 用PHPob_start()控制浏览器cache、生成html实现代码
- JavaScript如何控制Session实现原理及代码
- 关于SQL存储过程入门基础(流程控制)
- JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
- CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能