多的不说了，直接看代码吧

<html lang="en">

<head>

	<meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />

	<meta name="apple-mobile-web-app-capable" content="yes" />

	<meta name="apple-touch-fullscreen" content="YES" />

	<script type="text/javascript">

	var w =  screen.width;

	var rate = "0.55";

	switch(w){

				case 320:

                case 640:

                    rate = "0.5";

                    break;

                case 365:

                case 720:

                case 375:

                case 750:

                    rate = "0.585";

                    break;

                case 414:

                case 1242:

                case 1080:

                    rate = "0.64";

                    break;

                default:

                    rate = "0.55";

                    break;

	}

	document.write("<meta name='viewport' content='width=device-width,initial-scale="+rate+", minimum-scale=0.2, maximum-scale=1, user-scalable=no'>");

	</script>

	<meta charset="UTF-8">

	<title>DEMO</title>

	<!-- atwind | ChaosStudio http://cszi.com -->

	<link rel="stylesheet" href="css/normalize.css">

　　。。。。

后面的就略掉了。

让HTML页面缩放适应移动客户端尺寸的更多相关文章

  1. 页面缩放对css的影响

    昨天发现一个上线的项目css样式明显不对,但是查看别人的电脑上的页面样式都是没问题的,于是找了半天原因,原来是我的浏览器对这个页面缩放了,导致样式问题. 发现了页面缩放会作用在同一个域名下的所有页面, ...

  2. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

  3. 移动端h5页面的设计稿尺寸

    当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最 ...

  4. 关于手机端适配的问题（rem，页面缩放）

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  5. 关于页面缩放时css错乱的处理方法---之一

    这几天遇到一个问题,就是在做网页的时候,页面缩放时,布局就乱了,原来的样子不会跟随缩放的放大或者缩小进行改变,直接导致的后果,就是页面很难看,无法使用 之前虽然写了代码,但是一直没有注意到缩放后页面的 ...

  6. 无障碍阅读：页面缩放兼容性处理（zoom,Firefox火狐浏览器）

    1.无障碍阅读使用场景 无障碍阅读一般在政府类网站使用比较多,如: 天津海事局(http://www.tjmsa.gov.cn/),其中天津海事局的页面放大和页面缩小在firefox浏览器下存在bug ...

  7. 基于rem的移动端响应式适配方案(详解) 移动端H5页面的设计稿尺寸大小规范

    基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.c ...

  8. webview页面缩放 & 自适应

    0.webview页面自适应: // 1.LayoutAlgorithm.NARROW_COLUMNS : 适应内容大小// 2.LayoutAlgorithm.SINGLE_COLUMN:适应屏幕, ...

  9. Firefox页面缩放

    这一段firefox只能缩放文字,不能实现整个页面的缩放,各种尝试,最后发现是勾选了view--zoom--zoom text only!!(按alt键调出菜单)

随机推荐

  1. Javascript——闭包、作用域链

    1.闭包:是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式:在一个函数内部创建另一个函数. function f(name){ return function(object){ var ...

  2. GJM : Taurus.MVC 2.0 开源发布：WebAPI开发教程 [转载]

    Taurus.MVC 2.0 开源发布:WebAPI开发教程 转载自http://www.cnblogs.com/cyq1162/p/6069020.html 因是新手  粘贴时有一个版权问题 本文原 ...

  3. spring 3.x变通实现@Conditional注解的功能

    在某些情况下,我们要根据当前的系统配置决定是否初始化一个bean,也就是条件性加载,比如本地缓存或者分布式缓存,亦或是采用http实现或者socket实现.在spring 4.x中,可以使用新增的@C ...

  4. java:JDBC详解

    JDBC全称为:Java DataBase Connectivity(java数据库连接). SUN公司为了简化.统一对数据库的操作,定义了一套Java操作数据库的规范,称之为JDBC.     简单 ...

  5. ArcGIS server 开发实践之【FeatureLayer类】

    全是干活,你值得拥有 要素图层类简介:Class:FeatureLayer //调用方式:require(["esri/layers/FeatureLayer"],function ...

  6. Dom Animator – 提供 Dom 注释动画的 JS 库

    DOM 动画是一个极好的 JavaScript 库,用来在页面的 DOM 注释中显示小的 ASCII 动画.这对于那些检查你的代码的人是一个小彩蛋,仅此而已.它是一个独立的库,不依赖 jQuery 或 ...

  7. 编码之JSP乱码涉及问题

    各种编码一栏表 A. JSP/Servlet都有的编码设置 1. request.setCharacterEncoding("UTF-8") 2. response.setChar ...

  8. css3选择器（上）

    1.给导航加分割线,左右 .nav li::before,.nav li::after{ content:""; position:absolute; top:14px; heig ...

  9. GitHub学习心得之 安装配置与多帐号管理

    作者:枫雪庭 出处:http://www.cnblogs.com/FengXueTing-px/ 欢迎转载 GitHub学习心得之 安装配置与多帐号管理 1.前言2.GitHub Linux安装(ub ...

  10. [Android]解决ClickableSpan中点击后ListView中item的长按冲突的问题

    以下内容为原创,转载请注明: 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/3823429.html 项目中碰到一个问题,情景是这样的: 有一个Lis ...