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 动画基础教程
Dec 25 Javascript
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
事件模型在各浏览器中存在差异
Oct 20 Javascript
JavaScript游戏之优化篇
Nov 08 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
ionic中列表项增加和删除的实现方法
Jan 22 Javascript
微信小程序动态的加载数据实例代码
Apr 14 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 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加密解密函数代码
2013/06/19 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
PHP获取远程图片并保存到本地的方法
2015/05/12 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
jquery 插件开发方法小结
2009/10/23 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
Vue-CLI项目中路由传参的方式详解
2019/09/01 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
JS实现小米轮播图
2020/09/21 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python3读取文件常用方法实例分析
2015/05/22 Python
python调用fortran模块
2016/04/08 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
Django框架 querySet功能解析
2019/09/04 Python
Python序列类型的打包和解包实例
2019/12/21 Python
Python使用re模块验证危险字符
2020/05/21 Python
利用Python实现最小二乘法与梯度下降算法
2021/02/21 Python
后勤主管岗位职责
2014/03/01 职场文书
生产文员岗位职责
2014/04/05 职场文书
毕业生求职信
2014/06/10 职场文书
体育教师个人工作总结
2015/02/09 职场文书
小学少先队工作总结2015
2015/05/26 职场文书
团支部书记竞选稿
2015/11/21 职场文书
不要在HTML中滥用div
2021/05/08 HTML / CSS
Redis实现订单过期删除的方法步骤
2022/06/05 Redis