var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var userAgent = navigator.userAgent;
var index = userAgent.indexOf("Android");
if(index >= 0){
var androidVersion = parseFloat(userAgent.slice(index+8));
if(androidVersion>2.3){
$("head").eq(0).append("<meta name='viewport' content='width=640, initial-scale = "+phoneScale+", minimum-scale = "+phoneScale+", maximum-scale = "+phoneScale+",user-scalable=no, target-densitydpi=device-dpi'>");
}else{
$("head").eq(0).append("<meta name='viewport' content='width=640, target-densitydpi=device-dpi'>");
} }else{
$("head").eq(0).append("<meta name='viewport' content='width=640, initial-scale = "+phoneScale+", minimum-scale = "+phoneScale+", maximum-scale = "+phoneScale+",user-scalable=no, target-densitydpi=device-dpi'>");
}

2. 使用rem实现自适应http://caibaojian.com/web-app-rem.html

3.优化js

(function(a, d) {
var b = a.documentElement,
e = "orientationchange" in window ? "orientationchange" : "resize",
c = function() {
var a = b.clientWidth;
a && (b.style.fontSize = Math.min(a, 640) / 320 * 100 + "px")
};
css = document.createElement('style');
css.type="text/css";
css.innerHTML = "html {font-size:"+Math.min(b.clientWidth, 640) / 320 * 100+"px}";
a.getElementsByTagName('head')[0].appendChild(css);
a.addEventListener && (d.addEventListener(e, c, !1), a.addEventListener("DOMContentLoaded", c, !1));
})(document, window);

通过改变viewport 实现网站自适应的更多相关文章

  1. 手机版WEB开发经验分享,手机版网站开发注意事项,网站自适应,手机版网站自适应,移动安卓APP自适应

    转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mo ...

  2. 改变字体大小实现自适应之js方案A

    一.元素大小有两种写法 1.写结果:设计师给的移动端页面sketch设计稿一般是750px宽度,在sublime编辑器里,设置cssrem或rem-unit插件为56px的字体大小.做页面时,设计稿是 ...

  3. 特产网站自适应CSS

    下面是一个特产网站自适应CSS,这个特产自适应CSS通过屏幕宽度大小来进行适应的,而不是根据UA来判断,就加快了判断的速度,所以速度很快 中国特产站排名还是很好的,特别是手机端 li { list-s ...

  4. 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配

    Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局?       响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...

  5. html5手机网站需要加的那些meta标签,手机网站自适应

    的html5相关meta和标签    a.<!-- 强制让文档与设备的宽度保持1:1 -->    <meta name="viewport" content=& ...

  6. [转] -- html5手机网站自适应需要加的meta标签

    webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" ...

  7. rem布局和使用js rem动态改变字体大小,自适应

    解决rem文字动态改变字体大小: <script> console.log(window.devicePixelRatio); var iScale = 1; iScale = iScal ...

  8. 使用js rem动态改变字体大小,自适应

    <html> <head> <meta charset="utf-8"> <script> console.log(window.d ...

  9. meta viewport移动端自适应

    参考链接:https://www.jianshu.com/p/561357d7cd7b

随机推荐

  1. 看多csdn它还烂论坛?

    什么? 版权声明:本文博主原创文章,博客,未经同意不得转载.

  2. spring与mybatis集成和事务控制

    一个. 基本介绍 本文将使用spring整合mybatis, 并加入事务管理, 以此为记, 方便以后查阅. 二. 样例 1. 代码结构图: 2. 建表语句: DROP DATABASE test; C ...

  3. hive建表没使用LZO存储格式,可是数据是LZO格式时遇到的问题

    今天微博大数据平台发邮件来说.他们有一个hql执行失败.可是从gateway上面的日志看不出来是什么原因导致的,我帮忙看了一下.最后找到了问题的解决办法,下面是分析过程: 1.执行失败的hql: IN ...

  4. Repair Cisco vpnclient on windows10

    Repair Cisco vpnclient on windows10 http://linux48.com/archives/435/ http://bbs.pcbeta.com/viewthrea ...

  5. SqlServer发送邮件,定时作业

    今天偶然研究了一下sqlserver发送邮件的功能,之前听说过可以发,但是一直没尝试过,只是用C#写后台程序的方式来发邮件. 现在又多了一种发送邮件的途径. 大致的步骤如下: 1.配置sqlserve ...

  6. 修改Oracle XE Listener 占用的1521、8080端口

    修改Oracle XE Listener 占用的1521.8080端口今天在帮开发人员Demon安装oracleXE时,有这么一段提示: [sql]   Destination Folder: D:\ ...

  7. Oracle 数据库 有用的sql语句

    ; SELECT to_date('2014-12-01', 'yyyy-mm-dd') + numtodsinterval(rownum , 'day') FROM DUAL CONNECT BY ...

  8. php_json入库有关

    php入库json信息 有些字符需要特殊处理 //组装 $test=array(); $test["k1"]= urlencode($k1); $test["k2&quo ...

  9. 【Unity 3D】学习笔记三十八:角色控制器

    角色控制器 在unity中,已经帮我们实现的上下左右跳等动作,并将他们封装成了角色控制器.角色控制器保存在unity标准资源包中,能够说是很的强大.能够模拟第一或者第三人称视角.不受刚体的限制,很适用 ...

  10. UVa 740 - Baudot Data Communication Code

    称号:目前编码,他们shift键被按下,并提出,对应的两个编码,其中,2相应的编码shift操作. 给你适当的编码值.寻求相应的字符串. 分析:模拟.字符串. 简单题,标记shift的升降分类处理就可 ...