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版)
May 03 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jQuery实现的多屏图像图层切换效果实例
May 07 Javascript
简介JavaScript中的unshift()方法的使用
Jun 09 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 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 变量类型的强制转换
2009/10/23 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
8个必备的PHP功能开发
2015/10/02 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
JS原生轮播图的简单实现(推荐)
2017/07/22 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
vue 使用ref 让父组件调用子组件的方法
2018/02/08 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
2019/08/23 Javascript
一次微信小程序内地图的使用实战记录
2019/09/09 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
python映射列表实例分析
2015/01/26 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
在python中用url_for构造URL的方法
2019/07/25 Python
基于pygame实现童年掌机打砖块游戏
2020/02/25 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
致标枪运动员广播稿
2014/02/06 职场文书
安全生产汇报材料
2014/02/17 职场文书
行政专员的岗位职责
2014/03/10 职场文书
幼儿园老师寄语
2014/04/03 职场文书
祖国在我心中的演讲稿
2014/05/04 职场文书
市级优秀班主任事迹材料
2014/05/13 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python