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. 使用PF_PACKET和SOCK_RAW发送自己定义type以太网数据包

    本文介绍使用PF_PACKET和SOCK_RAW发送自己定义type以太网数据包,使用wireshare抓包能够获取到数据包,为Linux内核添加网络协议做铺垫. 先上码: #include < ...

  2. (大数据工程师学习路径)第三步 Git Community Book----基本用法(下)

    一.比较提交 - Git Diff 1.比较提交 - Git Diff 你可以用 git diff 来比较项目中任意两个版本的差异. $ git diff master..test 上面这条命令只显示 ...

  3. android模拟器与PC的端口映射(转)

    阅读目录 一.概述 二.实现步骤 回到顶部 一.概述 Android系统为实现通信将PC电脑IP设置为10.0.2.2,自身设置为127.0.0.1,而PC并没有为Android模拟器系统指定IP,所 ...

  4. HDU 5052 Yaoge’s maximum profit 光秃秃的树链拆分 2014 ACM/ICPC Asia Regional Shanghai Online

    意甲冠军: 特定n小点的树权. 以下n每一行给出了正确的一点点来表达一个销售点每只鸡价格的格 以下n-1行给出了树的侧 以下Q操作 Q行 u, v, val 从u走v,程中能够买一个鸡腿,然后到后面卖 ...

  5. 浅谈JavaScript中的柯里化函数

    首先,不可避免的要引经据典啦,什么是柯里化函数呢(from baidu): 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返 ...

  6. linux_ubuntu12.04 卸载和安装mysql、远程访问、not allowed

    一: 安装mysql 卸载mysql 第一步 sudo apt-get autoremove --purge mysql-server-5.0 sudo apt-get remove mysql-se ...

  7. 【转】UIAutomator定位Android控件的方法实践和建议(Appium姊妹篇)

    原文地址:http://blog.csdn.net/zhubaitian/article/details/39777951 在本人之前的一篇文章<<Appium基于安卓的各种FindEle ...

  8. Linux中加入用户、删除用户时新手可能遇到的问题

    Linux中加入用户.删除用户时新手可能遇到的问题  1.创建新用户后切换到新用户:No directory, logging in with HOME=/     加入用户     #sudo us ...

  9. 屏蔽webbrowser控件右键的一种方法

    原文:屏蔽webbrowser控件右键的一种方法 Option ExplicitPrivate Declare Sub ZeroMemory Lib "KERNEL32" Alia ...

  10. Ionic项目中使用极光推送

    Ionic项目中使用极光推送-android   对于Ionic项目中使用消息推送服务,Ionic官方提供了ngCordova项目,这个里面的提供了用angularjs封装好的消息推送服务(官方文档) ...