页面默认缩放比例为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的更多相关文章

  1. 转 关于HTML5中meta name="viewport" 的用法 不同分辨率手机比例缩放

    移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了 ...

  2. meta name="viewport" 属性详解

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  3. 关于<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 ...

  4. 关于 <meta name="viewport" content="width=device-width, initial-scale=1.0">的解释

    对于移动开发来讲,我还不太熟悉.今天在github上荡了一个系统源码,进行分析.发现其中有这样一段话: <meta name="viewport" content=" ...

  5. 手机网页H5 自适应不同分辨率的屏幕 必学标签meta之viewport

    viewport 语法介绍 <meta name="viewport"content=" height = [pixel_value | device-height ...

  6. iPhone/android的viewport 禁止页面自动缩放

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scal ...

  7. 页面自适应<meta name="viewport">标签设置

    viewport: 它在页面中设置,是应对手机模式访问网站.网页对屏幕而做的一些设置.通常手机浏览器打开页面后,会把页面放在一个虚拟的“窗 口”–这个比窗口大,也就是你常发现页面可以进行拖动.放大放小 ...

  8. meta标签viewport的深入理解（转）

    移动前端开发之viewport的深入理解 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的met ...

  9. <head>中<meta name="viewport" content="width=device-width,initical-scale=1"的作用>

    <meta name="viewport" content="width=device-width,initical-scale=1"的作用> co ...

随机推荐

  1. (C\C++)inline关键字

    背景(C&C++中) inline关键字用来定义一个类的内联函数,引入它的主要原因是用它替代C中表达式形式的宏定义. 表达式形式的宏定义如: #define ExpressionName(Va ...

  2. Kafka使用kclient三种使用方法

    kclient提供了三种使用方法,对于每一种方法,按照下面的步骤可快速构建Kafka生产者和消费者程序. 前置步骤1) 下载源代码后在项目根目录执行如下命令安装打包文件到你的Maven本地库. mvn ...

  3. 控制cms:CMSDropDownList的width

    查找了一下kentico内部使用相关控件的代码,发现有2种方式,可以达到效果. 在我们自己的css class定义的地方,在class前面加上.cms-bootstrap .cms-bootstrap ...

  4. PLSQL 安装说明

    PLSQL安装说明. 1.安装oracle 11g ,2030端口设置防火墙例外.2.PLSQL Developer 9.0.0.1601是绿色版,复制到本地即可.3.PLSQL->Tools- ...

  5. IntelliJ IDEA 运行错误:java: Compilation failed: internal java compiler error

    错误:java: Compilation failed: internal java compiler error 解决的方法: 文件 --> 设置 : 若没有模块,点击右边的把自己项目的模块添 ...

  6. [原创]java获取word里面的文本

    需求场景 开发的web办公系统如果需要处理大量的Word文档(比如有成千上万个文档),用户一定提出查找包含某些关键字的文档的需求,这就要求能够读取 word 中的文字内容,而忽略其中的文字样式.表格. ...

  7. linux防火墙过滤规则

    一.linux防火墙基础 防火墙分为硬件防火墙和软件防火墙. 1.概述 linux 防火墙体系主要工作在网络层,针对TCP/IP数据包实施过滤和限制,属于典型的包过滤防火墙. 包过滤机制:netfil ...

  8. 获取指定类型如枚举/属性上自定义attribue值

    有时候我们用数字来区分一些类型,如1:中国银行,2:建设银行,3:工商银行,…….这时候我在代码中通常会定义枚举来与定义的一一对应,并在该枚举值上设置特性来表示所代表的含义,这样避免多处写一些数字来标 ...

  9. node安装升级npm

    安装npm npm上有很多优秀的nodejs包,来解决常见的一些问题,比如用node-mysql,就可以方便通过nodejs链接到mysql,进行数据库的操作 在开发过程往往会需要用到其他的包,使用n ...

  10. JAVA基础--流程控制语句02

    JAVA流程控制语句 一.程序流程 定义:只代码执行的先后顺序 种类 顺序流程:程序默认流程,按照书写顺序执行 选择流程:选择语句 判断语句 重复流程: 循环控制语句 二.选择流程控制语句 判断语句 ...