JS制作手机端自适应缩放显示


Posted in Javascript onJune 11, 2015

JS制作手机端自适应缩放显示

示例一:

<script>
var _width = parseInt(window.screen.width);
var scale = _width/640;
var ua = navigator.userAgent.toLowerCase();
var result = /android (\d+\.\d+)/.exec(ua);
if (result){
var version = parseFloat(result[1]);
if(version>2.3){
document.write('<meta name="viewport" content="width=640, minimum-scale = '+scale+', maximum-scale = '+scale+', target-densitydpi=device-dpi">');
}else{
document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
} else {
document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
}
</script>

示例二:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
 if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
  var viewportmeta = document.querySelector('meta[name="viewport"]');
   if (viewportmeta) {
    viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
  document.addEventListener('touchstart', function () {
   viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=0.25, maximum-scale=1.6';
  }, false);
   document.addEventListener('orientationchange', function () {
   viewportmeta.content = 'viewportmeta.content = width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
  }, false);
   }
  }
});
</script>

示例三:

<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

总结:

一.其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。

<meta name="viewport" content="width=device-width, initial-scale=1" /> 

二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。

三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。

四. 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。  
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; } 

五. 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery动画1.加载指示器
Aug 24 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
引入JS文件IE6报语法错误或缺少对象问题的解决方法
Jan 09 Javascript
JQuery中extend使用介绍
Mar 13 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
不定义JQuery插件 不要说会JQuery
Mar 07 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
深入理解Javascript箭头函数中的this
Feb 13 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
Nov 29 Javascript
vue组件中的数据传递方法
May 14 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
实现placeholder效果的方案汇总
Jun 11 #Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 #Javascript
JavaScript中的setMilliseconds()方法使用详解
Jun 11 #Javascript
jQuery使用drag效果实现自由拖拽div
Jun 11 #Javascript
javascript 常见功能汇总
Jun 11 #Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 #Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 #Javascript
You might like
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
AngularJS 中文API参考手册
2016/07/28 Javascript
AngularJS  双向数据绑定详解简单实例
2016/10/20 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python正则表达式match和search用法实例
2015/03/26 Python
详解Python中用于计算指数的exp()方法
2015/05/14 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python获取指定字符串中重复模式最高的字符串方法
2018/06/29 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
实时获取Python的print输出流方法
2019/01/07 Python
python 根据字典的键值进行排序的方法
2019/07/24 Python
PyTorch中的C++扩展实现
2020/04/02 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
总经理岗位职责
2013/11/09 职场文书
机械专业应届生求职信
2013/12/12 职场文书
中职生求职信
2014/07/01 职场文书
小学安全汇报材料
2014/08/14 职场文书
迎新生标语大全
2014/10/06 职场文书
汽车车尾标语大全
2015/08/11 职场文书
小学音乐课教学反思
2016/02/18 职场文书