viewport实现html页面动态缩放/meta viewport/viewport
页面默认缩放比例为1,最小宽度为375px,在小于375px出现水平滚动条的时候重新计算显示比例缩小界面,
<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>viewport</title><meta id="viewport" name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"><script type="text/javascript">var winW = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, viewport = document.getElementById("viewport"), scale = 1;if (winW <= 320) {scale = winW / 375.00;}else if (winW < 395) {scale = (winW - 20) / 375.00;}if (winW < 395) {viewport.content = 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no';}</script><style>html, body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.container {width: 768px;margin: 0 auto;height: 300px;box-shadow: 0 0 1px #bebebe;}@media (max-width: 768px) {.container {width: 576px;}}@media (max-width: 576px) {.container {width: 375px;}}p {word-wrap: break-word;}</style> </head> <body><div class="container"><h1>viewport</h1><p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p> </div></body> </html>
转载于:https://www.cnblogs.com/stumpx/p/7889961.html
viewport实现html页面动态缩放/meta viewport/viewport相关推荐
- 手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport
viewport 语法介绍 <meta name="viewport" content=" height = [pixel_value | device-heigh ...
- 关于meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-sc..
网页源代码中有时候会遇到这样的一段代码: <metaname="viewport"content="width=device-width, initial-scal ...
- 响应式Web设计 viewport 移动端页面自适应
viewport指网页的可视区域 <meta name="viewport" content="width=device-width initial-scale= ...
- 关于meta name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalabl...
网页源代码中有时候会遇到这样的一段代码: <meta name="viewport" content="width=device-width, initial-sc ...
- 关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014
移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了 ...
- 移动端适配时对meta name=“viewport“ content=“width=device-width,initial-scale=1.0“的理解
viewport的概念 viewport就是设备的屏幕上能用来显示我们的网页的那一块区域. content属性值 <meta name="viewport" content= ...
- meta name=viewport content=width=device-width,initial-scale=1.0 究竟什么意思
meta name="viewport" content="width=device-width,initial-scale=1.0" 解释 <meta ...
- head中meta name=viewport content=width=device-width,initical-scale=1的作用
<meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...
- meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0/
网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放. <meta name="viewport" conten ...
最新文章
- C#语言与面向对象技术(2)
- CMakeLists.txt从入门到精通
- php正则表达式实例详解,正则表达式实例解析
- 技术动态 | TechKG:一个面向中文学术领域的大型知识图谱
- Dubbo使用Sentinel来对服务进行降级与限流
- 2016蓝桥杯C++A:网友年龄
- [LeetCode]41.First Missing Positive
- 「leetcode」77.组合【回溯算法】详解!
- matlab车牌倾斜校正,求做车牌倾斜校正程序。
- 百度认证(深度学习初级工程师)考试题1
- 【方向盘】2021年JVM生态报告:Java 11使用率超Java 8
- 团队管理19--团队分工
- 钉钉添加自定义机器人,实现每周定时@某人
- 在中国怎么使用tiktok
- Cisco Zone Base FireWall介绍及配置
- 软件配置管理的目标和任务
- c# autocad二次开发 dwg文件的框表框图导出pdf方便打印 dwg转pdf工具
- PostgreSQL 优化器逻辑推理能力 源码解析
- 转:Unicode字符集和多字节字符集关系
- python计算折扣价_在python中使用ifelifelse创建折扣计算
热门文章
- linux time dev null,/dev/null丟失后
- java putall实现,Java EnumMap putAll()
- 求两个集合是否有交集 c语言_高中数学:集合与函数概念知识点总结
- html修改span中的内容,在HTML中抓取span的内容
- mysql 安装完成后需要做的配置
- android 摄像头参数,获取Android设备上的详细的摄像头信息
- toad导入数据_利用TOAD实现EXCEL数据在oracle的导入导出
- cd协议属于计算机网络的应用层,计算机网络 题库 必考 期末 期终 考试 复习 考研 必备...
- sql的加减乘除运算_实现四则运算的一条sql语句
- linuxg下c++ 类导出_为什么PDF导出功能在SOLIDWORKS Electrical中不起作用?