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

<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. spring mvc+ELK从头开始搭建日志平台

    最近由于之前协助前公司做了点力所能及的事情,居然收到了一份贵重的端午礼物,是给我女儿的一个乐高积木,整个有7大包物件,我花了接近一天的时间一砖一瓦的组织起来,虽然很辛苦但是能够从过程中体验到乐趣.这次 ...

  2. mysql hang and srv_error_monitor_thread using 100% cpu

    昨天晚上,运维过来说有台生产服务器的mysql cpu一直100%,新的客户端登录不了,但是已经在运行的应用都正常可用. 登录服务器后,top -H看了下,其中一个线程的cpu 一直100%,其他的几 ...

  3. 基于软件开源实践（FLOSS）论共产主义的可实现性

    好久没发博客,来个狠的,我不信挨踢界有人比我更蛋疼来研究这个. 在马克思提出共产主义100多百年后,软件开发领域中出现了一种特别的生产方式:开源(FLOSS:Free/Libre and Open S ...

  4. ENVI软件操作之【数据的显示操作】

    数据的显示操作主要包括以下的一些简单窗口操作 1.文件列表管理 1)可用的波段列表Available Bands List,使用于存取ENVI图像文件和显示图像文件的主要控制对话框.无论何时何地打开一 ...

  5. [deviceone开发]-大家比较关注的应用内部升级

    一.简介 这个示例详细介绍了应用内升级的步骤,应用内升级是开发App必须的功能.推荐初学者学习. 二.效果图 三.相关下载 https://github.com/do-project/code4do/ ...

  6. iOS从info.plist获取项目的名称及版本号

    NSString *executableFile = [[[NSBundle mainBundle] infoDictionary] objectForKey:(NSString *)kCFBundl ...

  7. JavaScript学习02 基础语法

    JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...

  8. iOS学习路线

    这个学习路线必须发布到首页候选区.这个学习路线必须发布到首页候选区.这个学习路线必须发布到首页候选区.这个学习路线必须发布到首页候选区.这个学习路线必须发布到首页候选区.这个学习路线必须发布到首页候选 ...

  9. cocoapods pod setup

    在终端  输入 pod setup  之后 你会发现 一直没有反应    会出现这种情况   如下图   你要耐心等一下. 直到看到Setup completed    就算是成功了.(你的网络要好) ...

  10. CMMI4级实践中的5个经典问题及解答

    这五个问题相当经典而且比较深,需要做过CMMI4.5级的朋友才能看懂这些问题.这5个问题是一位正在实践CMMI4级的朋友提出来的,而解答则是我的个人见解. 五个疑问是:   A.流程,子流程部分不明白 ...