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. Debian 7设备nginx周围环境、编译并安装和启动

    /*********************************************************************  * Author  : Samson  * Date   ...

  2. spring mvc 控制器方法传递一些经验对象的数组

    由于该项目必须提交一个表单,其中多个对象,更好的方法是直接通过在控制器方法参数的数组. 因为Spring mvc框架在反射生成控制方法的參数对象的时候会调用这个类的getDeclaredConstru ...

  3. NFS文件系统配置 和 GLIBC更新

    为了配置集群环境,把过程记录一下,方便后续使用 NFS 文件系统  是 network file system 配置好ssh无密码访问 ,各节点为centos6.5 主节点 在文件/etc/expor ...

  4. MEF实现设计上的“松耦合”

    C#进阶系列——MEF实现设计上的“松耦合”(二)   前言:前篇 C#进阶系列——MEF实现设计上的“松耦合”(一) 介绍了下MEF的基础用法,让我们对MEF有了一个抽象的认识.当然MEF的用法可能 ...

  5. groovy install,gvm,groovysh简述(转)

    1.1 安装Groovy Groovy主页:http://www.groovy-lang.org 确保本地系统安装了Java 1.1.1 在Windows系统上安装Groovy 1.创建环境变量GRO ...

  6. SQL Server 2005 MD5函数

    原文:SQL Server 2005 MD5函数 在SQL Server 2005下自带的函数HashBytes() ,此函数是微软在SQL Server 2005中提供的,可以用来计算一个字符串的M ...

  7. 【Python】Python的urllib模、urllib2模块的网络下载文件

    因为需要从一些下载一个页PDF文件.但是需要下载PDF有数百个文件,这是不可能用人工点击下载.只是Python有相关模块,所以写一个程序PDF文件下载,顺便熟悉Python的urllib模块和ulrl ...

  8. ASP.NET MVC+EF框架+EasyUI实现权限管理系列(2)-数据库访问层的设计Demo

    原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(2)-数据库访问层的设计Demo ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1)框架搭建 前言:这 ...

  9. 随手记UIKit Dynamics

    以今年的优势WWDC品行,我记得一些明年的元素.一些博客上找到了新的功能没有被记录.认为iOS 8全力以赴.iOS 7该属性不随手记录为时已晚 :) 参考WWDC 2013的Session Video ...

  10. iOS8开发~UI布局(二)storyboard中autolayout和size class的使用具体解释

    一.概要:前一篇初步的描写叙述了size class的概念,那么实际中怎样使用呢,以下两个问题是我们一定会遇到的: 1.Xcode6中添加了size class,在storyboard中怎样使用? 2 ...