让HTML页面缩放适应移动客户端尺寸

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

<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">

　　。。。。

后面的就略掉了。

时间： 2024-10-01 22:35:32

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

html5中让页面缩放的4种方法

html5中让页面缩放的4种方法 2013-10-22 14:45:03 分类: Web开发 1.viewport这种方法,不是所有的浏览器都兼容 2.百分比这种方法,可以兼容大部分浏览器,但是修改幅度比较大.main .login .txt1{margin-top:8.59375%; position:relative;}3.css transform这种方法,可以兼容大部分浏览器,但是页面的位置是居中的.w320{transform: scale(1,1);-ms-transform: sc

webview支持页面缩放

1.webview支持页面缩放,普通经过以下设置就可满足80%的请求 //缩放开关 webView.getSettings().setSupportZoom(true); 设置此属性,仅支持双击缩放,不支持触摸缩放(在android4.0是这样,其他平台没试过) // 设置能否可缩放 webView.getSettings().setBuiltInZoomControls(true); 假如设置了此属性,那么webView.getSettings().setSupportZoom(true);也

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

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最值得学习的10个H5案例(各种经典,推荐收藏) 这可能是近半年做得最好的4个H5传播案例 还没搞懂H5营销?他们已经开始在玩“虚拟现实”了! 一个插线板的H5怎么就火了?大家明明是去看周鸿祎的八卦的 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是

禁止Html5在手机上屏幕页面缩放

最近测试html5页面,发现默认都允许用户缩放页面,或者在屏幕双击放大或缩小.即相当于这样设置 <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" /> 如果要禁止此情形,修改相应参数即可. <meta content="width=device-width, initial-scale=1.0, maximum-s

禁止页面缩放功能

在手机浏览器浏览页面时,有时要禁止页面中的组件缩放,因为如果不阻止缩放的话,体验效果不好. 而实现禁止页面缩放,只需要在head里面加入下面一行即可. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 下面这行我也见过人用,但是效果不如上一行: <meta id="viewport

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

基于rem的移动端响应式适配方案(详解) : https://www.jb51.net/article/118067.htm 移动端H5页面的设计稿尺寸大小规范 http://www.tuyiyi.com/v/53039.html 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9536126.html

禁止页面缩放

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 在这个里面主要有这几个属性: 1.width - viewport的宽度 2.height - viewport的高度 3.initial-scale - 初始的缩放比例 4.minimum-scale - 允许用户缩放到的最小比例 5.ma

移动端H5页面的设计稿尺寸大小规范

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta

移动设备中页面缩放的设定

使用移动设备浏览网页的时候,会发现有的网页可以缩放,有的不可以.这是为什么呢? 这是因为网页的meta中有个属性控制的. <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" name="viewport"> 这个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览