页面默认缩放比例为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. POJ 1861 Network (Kruskal算法+输出的最小生成树里最长的边==最后加入生成树的边权 *【模板】)

    Network Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 14021   Accepted: 5484   Specia ...

  2. POJ2243 Knight Moves —— A*算法

    题目链接:http://poj.org/problem?id=2243 Knight Moves Time Limit: 1000MS   Memory Limit: 65536K Total Sub ...

  3. POJ3273 Monthly Expense —— 二分

    题目链接:http://poj.org/problem?id=3273   Monthly Expense Time Limit: 2000MS   Memory Limit: 65536K Tota ...

  4. Bug不能重现的原因分析及其对策

    摘 要:本文简要分析了无法重现的Bug的可能产生原因,包括环境不一致.缺少最准确的描述和浏览器的不当设置.针对这些原因,本文给出了相应的对策.通过这些措施,可以重现许多以前认为不可重现的Bug.    ...

  5. ios 给移动的控件添加点击事件

    前言: 给一个UIView做移动动画,虽然看起来frame在持续改变,但是它的frame已经是最终值了. 也就是说表面看到的动画都是假象,它的真实位置已经是固定的了.所以只有点击在他的真实frame范 ...

  6. BZOJ_2683_简单题&&BZOJ_1176_[Balkan2007]Mokia_CDQ分治+树状数组

    BZOJ_2683_简单题&&BZOJ_1176_[Balkan2007]Mokia_CDQ分治+树状数组 Description 维护一个W*W的矩阵,初始值均为S.每次操作可以增加 ...

  7. 使用strtok_s函数从一个字符串中分离出单词

    下面的代码从含有多个结束符的字符串中分离出单词来,需要对strtok_s有清楚的认识.这段代码是我在写一个处理文件中单词个数时用来分离读取到的字符串中的单词时写的,亲测可用~ 1 2 3 4 5 6 ...

  8. bzoj2973石头游戏——矩阵乘法

    题目:权限题! 写了一下,但提交不了,先放着吧. 代码如下: #include<iostream> #include<cstdio> #include<cstring&g ...

  9. JavaScript-Tool：jquery.tree.js-un

    ylbtech-JavaScript-Tool:jquery.tree.js 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部 0. https://www.jst ...

  10. 如何 Xcode 开发工具里安装一个空的项目末模板

    很多朋友因为Xcode升级取消了空工程模板而发愁  今天给大家推荐一个简单方便的方法,导入空工程模板 对于 xcode7 来说可以使用下面的方法添加空模板.建议在升级的时候,不要下载beta版,最好下 ...