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>
viewport实现html页面动态缩放/meta viewport/viewport的更多相关文章
- 转 关于HTML5中meta name="viewport" 的用法 不同分辨率手机比例缩放
移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了 ...
- meta name="viewport" 属性详解
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...
- 关于<meta name="viewport" content="width= device-width,user-scalable= 0,initial-scale= 1.0,minimum-scale= 1.0">
<meta name="viewport" content=" width= device-width, user-scalable= 0, initial-sca ...
- 关于 <meta name="viewport" content="width=device-width, initial-scale=1.0">的解释
对于移动开发来讲,我还不太熟悉.今天在github上荡了一个系统源码,进行分析.发现其中有这样一段话: <meta name="viewport" content=" ...
- 手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport
viewport 语法介绍 <meta name="viewport"content=" height = [pixel_value | device-height ...
- iPhone/android的viewport 禁止页面自动缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...
- 页面自适应<meta name="viewport">标签设置
viewport: 它在页面中设置,是应对手机模式访问网站.网页对屏幕而做的一些设置.通常手机浏览器打开页面后,会把页面放在一个虚拟的“窗 口”–这个比窗口大,也就是你常发现页面可以进行拖动.放大放小 ...
- meta标签viewport的深入理解（转）
移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...
- <head>中<meta name="viewport" content="width=device-width,initical-scale=1"的作用>
<meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...
随机推荐
- linux设备驱动学习笔记（1）
学习了将近半个月的设备驱动程序的编写,也有一些体会,这里写下来也给学习做一个总结,为后面的学习做更好的准备. 首先,个人感觉驱动程序的设计是很有套路的,最基本的要求就是要掌握这些套路.所谓的套路就是一 ...
- Spring Boot2.0之 整合Redis集群
项目目录结构: pom: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http:// ...
- 织梦dedecms如何显示所有文章列表
本文介绍了dedecms中显示所有文章列表的实现方法,dedecms如何显示所有文章列表,有需要的朋友参考下. 例子,dedecms中显示所有文章列表. 代码示例:{dede:channelart ...
- Silverlight中使用MVVM(2)
Silverlight中使用MVVM(1)--基础 Silverlight中使用MVVM(2)—提高 Silverlight中使用MVVM(3)—进阶 Silverlight中使用MVVM(4)—演练 ...
- CentOS设置代理
假设我们要设置代理为 IP:PORT1.网页上网网页上网设置代理很简单,在firefox浏览器下 Edit-->>Preferences-->>Advanced--> ...
- (转)Excel自定义格式详解
”G/通用格式”:以常规的数字显示,相当于”分类”列表中的”常规”选项.例:代码:”G/通用格式”.10显示为10:10.1显示为10.1. 2. “#”:数字占位符.只显有意义的零而不显示无意义的零 ...
- 依赖倒置原则DIP&控制反转IOC&依赖注入DI
依赖倒置原则DIP是软件设计里一个重要的设计思想,它规定上层不依赖下层而是共同依赖抽象接口,通常可以是上层提供接口,然后下层实现接口,上下层之间通过接口完全透明交互.这样的好处,上层不会因依赖的下层修 ...
- Oracle 11G for redhat 自启动脚本
在$ORACLE_HOME/bin中,有dbstart和dbshut这两个脚本,可以使用这两个oracle自带的脚本实现oracle的开机自启动.这个脚本中包含oraclelistener.insta ...
- angular源码剖析之Provider系列--CacheFactoryProvider
CacheFactoryProvider 简介 源码里是这么描述的: Factory that constructs {@link $cacheFactory.Cache Cache} objects ...
- PTA QQ Account Manageme【map的巧妙应有】
5-27 QQ Account Management (25分) You are supposed to implement the functions of account "Log in ...