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 最简单易用的表单验证插件
Feb 27 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
brook javascript框架介绍
Oct 10 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
nw.js实现类似微信的聊天软件
Mar 16 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
jQuery实现表单动态添加数据并提交的方法
Jul 19 jQuery
js隐式转换的知识实例讲解
Sep 28 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
实现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
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
javascript弹出窗口实现代码
2015/11/12 Javascript
jquery实现跳到底部,回到顶部效果的简单实例(类似锚)
2016/07/10 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
python sys,os,time模块的使用(包括时间格式的各种转换)
2018/04/27 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python解压 rar、zip、tar文件的方法
2019/11/19 Python
CSS3 完美实现圆角效果
2009/07/13 HTML / CSS
纯CSS3实现自定义Tooltip边框涂鸦风格的教程
2014/11/05 HTML / CSS
GANT英国官方网上商店:甘特衬衫
2018/02/06 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
土木工程实习生自我鉴定
2013/09/19 职场文书
幼师自我鉴定范文
2013/10/01 职场文书
高中学校对照检查材料
2014/08/31 职场文书
爱的教育观后感
2015/06/17 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python
spring boot实现文件上传
2022/08/14 Java/Android