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

<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. opencart二次开发小记

    在controller中如果要调用model中数据或说方法可以这样写 $this->load->model('catalog/information');//model中的informat ...

  2. MAC使用CocoaPods

    前言,還是那句話,按照濤叔下面畫黃色的步驟順序執行就好了 使用CocoaPods兩種方式:使用之前安裝的插件&命令行. 一.利用插件 1.創建項目后添加CocoaPods 2.在文本框中輸入如 ...

  3. C#读取Excel文件：通过OleDb连接，把excel文件作为数据源来读取

    转载于:http://developer.51cto.com/art/200908/142392.htm C#读取Excel文件可以通过直接读取和OleDb连接,把excel文件作为数据源来读取:   ...

  4. Hibernate(一)__简介

    一. hibernate是什么 (一)hibernate 是一个orm框架,orm (object relation mapping) 对象关系映射框架 o object -> 业务层(只对对象 ...

  5. DataSet的灵活,实体类的方便，DTO的效率：SOD框架的数据容器，打造最适合DDD的ORM框架

    引言:DDD的困惑 最近,我看到园子里面有位朋友的一篇博客 <领域驱动设计系列(一):为何要领域驱动设计? >文章中有下面一段话,对DDD使用产生的疑问: •没有正确的使用ORM, 导致数 ...

  6. Popmotion – 小巧，灵活的 JavaScript 运动引擎

    Popmotion 是一个只有12KB的 JavaScript 运动引擎,可以用来实现动画,物理效果和输入跟踪.原生的DOM支持:CSS,SVG,SVG路径和DOM属性的支持,开箱即用.Popmoti ...

  7. CSS盒子模型

    2016-10-22 <css入门经典>第6章 1.每个HTML元素对应于一个显示盒子,但不是所有的元素都显示在屏幕上. 2.HTML元素显示为CSS显示盒子的真正方法称为"可视 ...

  8. 【web前端面试题整理04】阿里一行之大神面对面

    前言 这段时间我在河南一家公司当了一段时间的前端主管,最后可耻的匿了,原因各种各样,最主要的就是不想呆在郑州了. 其实这里的同事还是很不错的,面对老总最后的挽留我不是没有动心,而是这个地方确实不太好, ...

  9. pqgrid对json数据的绑定

    $(function () { var data = [[1, 'Exxon Mobil', '339,938.0', '36,130.0'], [2, 'Wal-Mart Stores', '315 ...

  10. [转]搭建Maven私服

    在开发过程中,有时候会使用到公司内部的一些开发包,显然把这些包放在外部是不合适的.另外,由于项目一直在开发中,这些内部的依赖可能也在不断的更新.可以通过搭建公司内部的Maven服务器,将第三方和内部的 ...