移动web设计稿尺寸,关于移动web尺寸的那点事
我自己的做稿子的时候,一开始就有一个习惯,先放上这段代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 未隐藏URL栏
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" /> 已隐藏URL栏
1:1显示(initial-scale=1.0, maximum-scale=1.0),
禁止放大缩小(user-scalable=no)
隐藏IOS系统浏览器的URL栏目与状态栏目(minimal-ui,只有IOS7版本支持哦)
现在就是1:1显示啦,
移动wep肯定是用HTML5啦!!不用说的
然后就
alert('width:' + window.innerWidth + ';height:' + window.innerHeight);
这样就能可视区域1:1的尺寸啦!!
这样就得到机子可视区域尺寸啦!!然后直接就可以在PS或AI里面做稿喽,
记得是72分辨率哦,
还有一点特别注意,就是图片的问题,一定要加1倍的宽和高才能让图片特别清晰哦,优其是LOGO,这个~~你懂的~~~~~
目前我知道的移动端可视区尺寸
iPhone4/iPhone4s 320 * 372 / 320 * 441 (已隐藏URL与状态栏)
iPhone5/iPhone5s 320 * 460 / 320 * 529 (已隐藏URL与状态栏)
Note2 360 * 567 (未隐藏URL与状态栏)
iPad 3/4 768*928 (未隐藏URL与状态栏)
GALAXY SIII 360 * 567 (未隐藏URL与状态栏)
小米2A 360 *567 (未隐藏URL与状态栏)
HTC G10 320 * 460
以上是我目前知道的,还有特别多,大家有空多打印出来,再分享出来啦,人多力量大,用的机子也不同
听说
window.onload = function(){
setTimeout(scrollTo,0,0,0);
}
可以隐藏android和IOS系统的URL,但我一直试都不行,是我弄错了,还是机子问题,还是TM的不给力。
移动web设计稿尺寸,关于移动web尺寸的那点事的更多相关文章
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...
- 什么是响应式Web设计?怎样进行?
http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...
- 十大响应式Web设计框架
http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- 从网易与淘宝的font-size思考前端设计稿与工作流
本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...
- 从网易与淘宝的font-size思考前端设计稿与工作流 (转)
从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...
- 响应性web设计实战总结
响应性web设计实战 响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图 ...
- 响应式WEB设计
近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...
- Web设计思想——渐进增强
最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...
随机推荐
- nodejs注册为windows服务
http://blog.csdn.net/puncha/article/details/9047311 http://www.oschina.net/question/12_18694 http:// ...
- 用 Webgoat 撬动地球,看安全测试的引路石!
测试工程师是很多人迈进软件行业的起点.从负责很小的局部到把握整个产品的质量,每个人花费的时间长短不一--从功能到性能.可用性到容错性.从兼容性到扩展性.稳定性到健壮性--方方面面逐渐做广做深. 不过, ...
- Hibernate+jxl+excel导入数据库
在将excel中的10w行数据导入数据库中时,总发生内存溢出,一开始使用的Spring+Hibernate;不知如何使用批处理,后来只是用Hibernate,10W行数据几分钟完成, 代码如下: pu ...
- rootkit的检测工具使用(chkrootkit和rootkit hunter)
信息安全 这两天突然发现我们的服务器产生大量DNS解析连线.为了查明问题,就下载网上找工具检查问题所在.用了两个工具,一个chkrootkit,另外一个rootkit huntur. ...
- BZOJ1271: [BeiJingWc2008]秦腾与教学评估
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1271 题解: 这种题真是太神了! 只需要考虑被覆盖的次数的奇偶性,并且保证满足题意的点至多只有 ...
- Java中的包
包:定义包用package关键字. 1:对类文件进行分类管理. 2:给类文件提供多层名称空间. 如果生成的包不在当前目录下,需要最好执行classpath,将包所在父目录定义到classpath变量中 ...
- 折腾iPhone的生活——iOS设备重刷固件
iOS设备升级系统总共有这么几种方法: 1.OTA升级,也就是我们最常碰到的,在设备上,连上Wifi,在设置里面的软件更新就可以直接通过Wifi安装新的系统(已越狱设备不要这样升级) 2.通过iTun ...
- SQL Server阻止了对组件xp_cmdshell过程的解决方案
使用SQL tools连接sqlserver时候出现以下问题: SQL Server阻止了对组件xp_cmdshell过程的解决方案错误描述:SQL Server阻止了对组件‘xp_cmdshell’ ...
- Java Executor 框架学习总结
大多数并发都是通过任务执行的方式来实现的.一般有两种方式执行任务:串行和并行. class SingleThreadWebServer { public static void main(String ...
- wikioi 1154 能量项链 (2006年NOIP全国联赛提高组)
题目描述 Description 在Mars星球上,每个Mars人都随身佩带着一串能量项链.在项链上有N颗能量珠.能量珠是一颗有头标记与尾标记的珠子,这些标记对应着某个正整数.并且,对于相邻的两颗珠子 ...