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

<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. MAC 卸载 openfire

    顺序执行以下命令: sudo rm -rf /Library/PreferencePanes/Openfire.prefPane sudo rm -rf /usr/local/openfire

  2. go语言 类型:布尔类型

    Go语言中的布尔类型与其他语言基本一致,关键字也为bool,可赋值为预定义的true和false示例代码如下: var v1 bool v1 = true v2 := (1 == 2) // v2也会 ...

  3. 通过gulp为requireJs引入的模块添加版本号

    由于项目用到requireJs,并且通过gulp来对项目进行统一的管理,为了防止浏览器对文件进行缓存,所以通过gulp为项目中的文件添加版本号. 1.分别安装gulp-rev.gulp-rev-col ...

  4. [转]maven创建自定义的archetype

    创建自己的archetype一般有两种方式,比较简单的就是create from project 1.首先使用eclipse创建一个新的maven project,然后把配置好的一些公用的东西放到相应 ...

  5. HTML <fieldset> 标签将表单内的相关元素分组

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段. 当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边 ...

  6. CSS学习总结（一）

    不知道大家对CSS的印象是怎么样的呢?也许有些模糊,也许根本不清楚.其实它跟我们密切相关,一旦我们浏览网页,都在与它打交道.没有它,我们看不到现在如此丰富多彩的网页效果.那么它到底是什么呢?又该如何使 ...

  7. ae显示标注

    //添加标注,比TextElment功能更强大 public static void ToAddAnnotate(ILayer layer, string fieldName) { IGeoFeatu ...

  8. 将自己写的库上传到cocoapods（2015）

    2015年以前上传到cocoapods的方式相较于现在比较麻烦,现在用不上在此也就不提了.现在上传到cocoapods只需要简单的几步即可. 1.首先你需要有一个自我感觉写的差不多的库. 2.注册tr ...

  9. jsp声称的java文件位置

    想找到JSP生成的字节码文件还是Java文件,这得看你加载Web应用是自己配置的Tomcat还是加载到Eclipse默认路径下:先说Eclipse默认路径下的吧,其路径为:你的eclipse存放工程的 ...

  10. NSNotificationCenter应用总结

    通常我们在 iOS 中发生什么事件时该做什么是由 Delegate 实现的,例如 View 加载完后会触发 viewDidLoad.  Apple 还为我们提供了另一种通知响应方式,那就是 NSNot ...