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">
<!--        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">-->
    </head>
    <body>
        <h1>viewport测试</h1>
        <script>
            var lvw = document.documentElement.clientWidth;
            var lvh = document.documentElement.clientHeight;
//            document.write("<p>layout viewport:"+lvw+"*"+lvh+"</p>");
            alert("layout viewport:"+lvw+"*"+lvh);

            var vvw = window.innerWidth;
            var vvh = window.innerHeight;
            alert("visual viewport:"+vvw+"*"+vvh);

            document.write('<meta name="viewport" content="width=device-width,initial-scale=1">');
            var ivw = document.documentElement.clientWidth;
            var ivh = document.documentElement.clientHeight;
            alert("ideal  viewport:"+ivw+"*"+ivh);
        </script>
    </body>
</html>

三,关于viewport查询的网站

http://viewportsizes.com/



时间: 2024-10-07 14:49:04

Webapp---深入理解viewport,viewport测试,viewport查询网站的相关文章

MySQL语句测试——数据查询

MySQL语句测试--数据查询 3.4 数据查询 一.单表查询 /*1.选择表中的若干列,各个列的先后顺序和语句中列名从左到右的顺序一致 select 目标表达式 from 表名; */ /*(1)select 列名 from 模式名.表名;*/ select Sno,Sname from zyl.student; /*(2)若要查询全部列可用*代替*/ select * from student; /*(3)查询经过计算的值(目标表达式:列名/表达式/字符串常量/函数等)*/ select S

在PC上测试移动端网站和模拟手机浏览器的5大方

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

在PC上测试移动端网站和模拟手机浏览器的5大方法

查了很多资料,尝试了大部分方法,下面将这一天的努力总结下分享给大家,也让大家免去看那么多文章,以下介绍的方法,都是本人亲自测试成功的方法,测试环境winxp. 一.Chrome*浏览器 chrome模拟手机总共有四种方法,原理都一样,通过伪装User-Agent,将浏览器模拟成Android设备.以下标星的为推荐方法. 1.新建Chrome快捷方式 右击桌面上的Chrome浏览器图标,在弹出的右键菜单中选择"复制",复制一个图标副本到桌面.右击该副本,选择"属性",

关于数字证书理解的简单整理以及12306网站证书简单分析

首先简单理解一下什么是数字证书.这里是一篇英文文档,描述的很形象.形象的描述了什么是公钥,什么是私钥,如果确保数字证书的可靠性等. 下面,我们看一个应用"数字证书"的实例:https协议.这个协议主要用于网页加密. 一般我们电脑的浏览器中都有一些受信任的证书颁发机构列表, 里边存储的都是一些机构的信息.这些机构都是权威的.当然可以通过安装软件的方式,来增加证书颁发机构,比如中国银行的根证书软件,阿里巴巴的根证书软件.默认我们认为这些软件都是从官网下载的,是绝对的没被篡改的,可靠的.简单

如何快速搭建快递单号查询网站!

最近公司有这样的需求,需要对公司的电子商城集成快递单号查询服务,后来本打算自己开发,但是到网上逛了圈后发现,有已经开发好的快递查询接口, 我嘴角歪了歪,不用白不用,先用快递一百的试试,仔细看了下接口说明,本打算用的时候看到对申通快递,ems快递只能html返回,哎感觉不符合公司的要求,后来到另一个网站爱快递申请了个快递接口,感觉还不错,至少现在没看出毛病,帖下接口快递单号查询地址www.aikuaidi.cn,方便下次查阅. 如何快速搭建快递单号查询网站!,布布扣,bubuko.com

推荐一个CMMI认证查询网站

随着软件企业的增多和意识的增强,越来越多公司开始做CMMI的认证评估,由于国内网速和CMMI官网的网站综合原因,打开速度超级慢. 所以本文推荐一个CMMI认证查询网站,认证后的结果查询可以点这里查询:CMMI认证 注: CMMI全称是Capability Maturity Model Integration,即能力成熟度模型集成(也有称为:软件能力成熟度集成模型),于2002年正式发布,由美国国防部与卡内基—梅隆大学等共同开发研制.

1、历史天气查询网站-准备工作

一.引言 一直想学习Sql Server.Oracle数据库的优化技巧,以及一些Html的酷炫报表,可是没有数据.如果是自己造数据,觉得太麻烦,同时效果也不好.于是乎小编想到了爬虫,爬取网上的数据. 既然决定采用爬虫获取数据,下面就开始思考选择爬去什么类型的数据.有小说数据.豆瓣电影.天气数据等等,最终小编选择了天气数据.百度了几天了,浏览天气网站,发现历史天气查询网站的数据比较符合小编的感官,下面贴该网站的界面图. 二.目标网站截图 1.天气查询网站首页http://lishi.tianqi.

上网搜关于缓存的内容,谈谈你对缓存的理解看法。并回答在网站开发中使用缓存有哪些好处?

缓存的英文是cache,一般是用于RAM存储器,用于存储临时数据,断电后存储的内容会消失.缓存是临时文件交换区,电脑把最常用的文件从存储器里提出来临时放在缓存里,就像把工具和材料搬上工作台一样,这样会比用时现去仓库取更方便.因为缓存往往使用的是RAM(断电即掉的非永久储存),所以在忙完后还是会把文件送到硬盘等存储器里永久存储.电脑里最大的缓存就是内存条了,最快的是CPU上镶的L1和L2缓存,显卡的显存是给GPU用的缓存,硬盘上也有16M或者32M的缓存.千万不能把缓存理解成一个东西,它是一种处理

webapp思路和rem适配极其viewport

webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般(手机浏览器)默认的是960px左右,就把页面压缩到 960px显示,所以是比手机屏幕宽的哟.等比放小,所以,为了显示的好看,要设定viewport为屏幕宽,就是:如此标签 <meta name="viewport" content="width=device-width,