通过改变viewport 实现网站自适应

     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‘>");
    }
时间: 2024-11-08 20:57:57

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

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

转自 http://my.oschina.net/cart/blog/282477 做前端开发不短了,用过jQuery Mobile jqMobi 也纯手工写过.. 最后总结如下: jQuery Mobile:适合大而全,兼容性高,功能全,但是文件大,略显臃肿..如果你是网页版.手机版共用jquery库等 适合使用jQuery Mobile. jqMobi:适合单独就是手机版的站,体积小,速度快,但是兼容性没有jQuery Mobile好,功能没有jQuery Mobile全,但是一般也够用啦.

手机网站自适应

1.近自己做的手机网管的页面,在手机上显示的时候,总是要手动进行页面缩放,这样子一来.采用Opera和 safari 等手机浏览器的时候,页面变形得很厉害,第一次用领导到的Iphone的时候.页面字变得太小,要缩放才可以.参考了3g.163 Yahoo ,Live 的页面后,发现CSS并无太大的区别.所以不是的CSS的问题.因为在PC 上,用各种浏览器都进行了测试.有一个最关键的东西.加上了就没有问题了!<?xml version="1.0" encoding="utf

怎么让手机网站自适应设备屏幕宽度? 转自百度经验

手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下. 工具/原料 写代码软件,记事本或DW都可以 手机或平板一台,做测试 方法/步骤 方法:在网页头部加上这样一条meta标签:<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.

【转载&#183;收藏】 html5手机网站自适应需要加的meta标签

webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/> 下面是对于这个标签的具体说明: viewport 语法介绍: <meta name

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

webapp开发初期,会碰到在pc端开发好的页面在移动端显示过大的问题,这里需要在html head中加入meta标签来控制缩放 <meta name=" viewport" content="width=device-width initial-scale=1.0 minimum-scale=1.0 miximum=1.0 user-scalable=yes"/> 下面是对于这个标签的具体说明: viewport 语法介绍: <meta name

Webapp---深入理解viewport,viewport测试,viewport查询网站

一,关于深入理解viewport,这里推荐一篇文章: http://www.cnblogs.com/2050/p/3877280.html 二,这是一段viewport测试代码,可以输出layout viewport,visual viewport,ideal viewport: 其实我们最关心的是:ideal viewport的宽度,然后基于这个宽度做流式布局的webapp开发. <html> <head> <meta charset="utf-8"&g

手机网站自适应无高度情况下浮动元素背景如何显示

给标签加一个overflow:hidden就可以 overflow:hidden是超出隐藏..只要不设高度而且里面有浮动元素的话高度就会等于浮动元素的高度. 潘智勇 9/25/2014 5:16:55 PM 如果设了高度而且小于子元素高度的就会把子元素多出来的隐藏掉

一天完成把PC网站改为自适应!原来这么简单!

http://www.webkaka.com/blog/archives/how-to-modify-a-web-page-to-be-responsive.html 一天完成把PC网站改为自适应!原来这么简单! 作者:Kaka    时间:2015-8-27 11:26:9    浏览:5279    评论:8 网站自适应,很多人都认为是很高级需要很多时间去实现的东西,不愿意去把一个现成的网站改成自适应,宁愿单独另外做一个移动站.我之前觉得实现网站自适应,要设计很多套CSS,并且要结合jQue

自适应网站设计对百度友好的关键:添加applicable-device标签(转)

现在很多网站都使用了自适应网页设计(Response-Web-Design),以满足庞大的移动端用户群的需要.但是在技术上设计了自适应的网页之后,出于SEO的考虑,你还要照顾到如何对百度更友好,即告诉百度"我是自适应页面",方便百度进行识别校验. 自适应网页设计 浏览器对自适应识别校验代码 在自适应网页设计中,我们使用meta标签来告诉浏览器网页的自适应规则.如: <meta name="viewport" content="width=device