页面默认缩放比例为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. 学习html5 中的canvas（一）

    1.canvas画直线 <!doctype html> <html> <head> <meta charset="UTF-8"> & ...

  2. 哈希表的C实现（一）

    哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.具体的介绍网上有很详 ...

  3. day4装饰器-迭代器&&生成器

    一.装饰器 定义:本质是函数,(装饰其他函数)就是为其它函数添加附加功能 原则:1.不能修改被装饰的函数的源代码 2.不能修改被装饰的函数的调用方式 实现装饰器知识储备: 1.函数及“变量” 2.高阶 ...

  4. MariaDB + Visual Studio 2017 环境下的 ODBC 入门开发

    参考: Easysoft公司提供的ODBC教程 微软提供的ODBC文档 环境: Windows 10 x64 1803 MariaDB TX 10.2.14 x64 MariaDB ODBC Conn ...

  5. Linux常用的18个命令（复习）

    1. cd命令 它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切换到目录/root/Docements cd . ...

  6. unix网络编程环境配置程序运行

    1 查看ubuntu版本 cat /etc/issue 2 查看版本 cat /proc/version 3 下载 你可以通过其他方式下载 这里下载好了 文件名为unpv13e 4 开始配置 (1)c ...

  7. bash 脚本编程七 将命令输出保存到变量中（转载）

    转自:http://blog.csdn.net/csfreebird/article/details/7978699 `符号包含的命令执行完后,可以讲其输出结果保存到变量中 #!/bin/bash v ...

  8. 开源一个基于dotnet standard的轻量级的ORM框架-Light.Data

    还在dotnet framework 2.0的时代,当时还没有EF,而NHibernate之类的又太复杂,并且自己也有一些特殊需求,如查询结果直接入表.水平分表和新增数据默认值等,就试着折腾个轻量点O ...

  9. E20180408-hm

    interaction  n. 互动; 一起活动; 合作; 互相影响; interface n. 界面; <计>接口; 交界面;   v. (使通过界面或接口) 接合,连接; [计算机] ...

  10. 百度之星资格赛 1004 度度熊的午饭时光（01背包+最小序号和+字典序+有bug）

    分析 首先声明一下,我的代码有漏洞的,求大神给个正确代码 思路如下: 首先做一遍01背包记录路径并求出最大总分,令path[i][j]表示第i个物品包含在dp[j]的求值过程中.再逆序枚举money, ...