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

<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. Bug管理工具之Mantis_配置篇

    角色管理员.经理.开发人员.修改人员.报告人员.查看人员,权限从大到小递减.分配: My View Settings 'assigned' => '1', 'unassigned' => ...

  2. 跨平台日志清理工具 Log-Cutter v2.0.1 RC-1 发布

    Log-Cutter 是JessMA开源组织开发的一个简单实用的日志切割清理工具.对于服务器的日常维护来说,日志清理是非常重要的事情,如果残留日志过多则严重浪费磁盘空间同时影响服务的性能.如果用手工方 ...

  3. Hibernate(一)__简介

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

  4. MyBank（自助银行）系统

    光阴似箭,岁月如梭. 从开始学Java到现在学C#已快四个月了,我们学的东西越来越多了.但是虽说学到现在,都不知道有什么用?没地方表现啊. 那么今天我就来给大家说说说这些东西的用处吧. 就拿MyBan ...

  5. 在你设计中可能用到的20个杂志 PSD 原型

    你是否正在为您的印刷产品找一些现成的原型素材?在这里,我们收集了一组免费的杂志 PSD 素材,必将派上用场.这些原型将给你和你的客户一个先睹为快的产品,在现实生活中看起来如何.所有这些原型提供了可以免 ...

  6. VS2010在64位系统中连接64位Oracle出现的问题和解决方法

    C#使用System.Data.OracleClient连接Oracle数据库.我的是window7/64位系统,装了一个64位的oralce 11G r2 客户端是64位的 用VS10调试错误信息如 ...

  7. Oracle基础和用户管理

    1.数据库的使用: 项目的规模:负载量(用户)有多大? 成本: 安全性:   (小型数据库)access.forbase 负载小 :100人以内,比如留言板,信息管理系统. 成本:千元以内. 安全性要 ...

  8. atitit.数据验证--db数据库数据验证约束

    atitit.数据验证--db数据库数据验证约束 1. 为了加强账户数据金额的安全性,需要增加验证字段..1 2. 创建帐户1 3. 更改账户2 4. ---code3 5. --fini4 1. 为 ...

  9. Atitit jOrgChart的使用  组织架构图css html

    Atitit jOrgChart的使用  组织架构图css html 1. 项目要做组织架构图,要把它做成自上而下的树形结构,于是决定1 2. Html导入 以来的css js1 2.1. 数据来源 ...

  10. webservice简单引用

    //1.创建网站//2.新建项=>添加web服务//运行texttweb.asmx可以通过访问http://域名/webservice/texttweb.asmx来验证了//3.添加服务引用=& ...