我自己的做稿子的时候,一开始就有一个习惯,先放上这段代码
<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尺寸的那点事的更多相关文章

  1. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

  2. 什么是响应式Web设计?怎样进行?

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  3. 十大响应式Web设计框架

    http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意 ...

  4. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  5. 从网易与淘宝的font-size思考前端设计稿与工作流

    本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点 ...

  6. 从网易与淘宝的font-size思考前端设计稿与工作流 (转)

    从网易与淘宝的font-size思考前端设计稿与工作流   阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7 ...

  7. 响应性web设计实战总结

    响应性web设计实战 响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图 ...

  8. 响应式WEB设计

    近期在学习有关响应式设计的内容,对此做了些整理,图片来源于网络,附上自己做的简单demo,没有js,只用CSS做了简单的搭建http://y.zhso.net/. 1.为什么需要响应式web设计 出于 ...

  9. Web设计思想——渐进增强

    最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...

随机推荐

  1. javascript日用代码集合(一)

    获取url参数 function get_url_param(name){ var reg = new RegExp("(^|&)" + name + "=([^ ...

  2. CTSC模拟题 树上的路径

    Description 给定一棵\(N\)个结点的树,结点用正整数\(1 \dots N\)编号,每条边有一个正整数权值.用\(d(a, b)\)表示从结点\(a\)到结点\(b\)路径上经过边的权值 ...

  3. iOS出现 Undefined symbols for architecture armv7 std::basic_string<char, std::char_traits<char>

    Undefined symbols for architecture i386: “_OBJC_CLASS_$_XXX”, referenced from: objc-class-ref in XXX ...

  4. 创新高性能移动 UI 框架-Canvas UI 框架

    WebView 里无法获得的能力虽然是「体验增强」与「端基本能力」,但现都基本上有成熟解决方法.但后期的 UI 和 Layout 的性能反而是目前 Web 技术欠缺的.所以,无论是 Titanium ...

  5. AVOIR发票的三种作用

    1. 开错了发票,应收多写了,应该抵消掉一部分应收2. 客户临时有变化,比如只买一部分产品,取消了另一部分,那么也是开AVOIR抵消了一部分应收3. 退钱给客户的时候,也要开一张AVOIR发票 注意, ...

  6. Win8.1、Office2013一键激活工具

    Win8.1.Office2013一键激活工具 KMSpico V7.0 是一款激活Win8.Windows8.1和Office2013的工具,由国外网友heldigard基于KMSEmulator制 ...

  7. C语言基础课程 第四课 它山之石可以攻玉---C语言数据类型和表达式

     1         C语言中的数据类型 1.1      常量 常量就是在程序中不可变化的量 1.1.1         #define #define MAX 10 Define;//定义了一 ...

  8. 两种常用的MySQL官方客户端软件

    本博文的主要内容有 .命令行客户端软件---MySQL Command Line Client .MySQL-Workbench客户端软件 1.命令行客户端软件---MySQL Command Lin ...

  9. Hardwood floor - SGU 131(状态压缩)

    题目大意:用 2*1 或者2*2-1的格子覆盖M*N的矩阵,有多少种覆盖方式. 分析:容易知道有以下6种放置方式. 然后用深搜的方法直接搞出来就行了,不过要使用两个变量来判断本位是否受影响.如果本行的 ...

  10. 敏捷开发松结对编程系列:L型代码结构案例StatusFiltersDropdownList(中)

    这是松结对编程的第22篇(专栏目录). 接前文 业务代码 比较长,基本上就是看被注释隔开的三大段,先显示状态群筛选链接,然后是单个状态筛选,然后是显示下拉框的当前选中项,最后显示下拉框. public ...