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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
用js实现的检测浏览器和系统的函数
Apr 09 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
详解Vue2 无限级分类(添加,删除,修改)
Mar 07 Javascript
详解require.js配置路径的用法和css的引入
Sep 06 Javascript
详解jQuery中的easyui
Sep 02 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
PHP Document 代码注释规范
2009/04/13 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php获取图片信息的方法详解
2015/12/10 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
将PHP的session数据存储到数据库中的代码实例
2016/06/24 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
Javascript模块模式分析
2008/05/16 Javascript
javascript onmouseout 解决办法
2010/07/17 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
2012/09/14 Javascript
JS 控件事件小结
2012/10/31 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
js中call与apply的用法小结
2013/12/28 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
详解JavaScript的Date对象(制作简易钟表)
2020/04/07 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
一个超简单的jQuery回调函数例子(分享)
2016/08/08 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python使用pipeline批量读写redis的方法
2019/02/18 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
美国彩妆品牌:Coastal Scents
2017/04/01 全球购物
俄罗斯运动、健康和美容产品在线商店:Lactomin.ru
2020/07/23 全球购物
会计岗位职责
2013/11/08 职场文书
2014年党建工作总结
2014/11/11 职场文书
2015年高校辅导员工作总结
2015/04/20 职场文书
毕业论文致谢怎么写
2015/05/14 职场文书
调研报告的主要写法
2019/04/18 职场文书
高中优秀作文(范文)
2019/08/15 职场文书