移动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的不给力。

时间: 2024-10-01 00:22:57

移动web设计稿尺寸,关于移动web尺寸的那点事的相关文章

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

原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因此,Ethan Marcotte提出一种响应式web设计的概念. 响应式web设计的英文为Responsive Web Design,简写为RWD. 在图书馆借到一本O'REILLY的<Head First Moblie Web>,里面讲到了一些做RWD的技巧. 今天学到的两招是: 1.使用med

十大响应式Web设计框架

http://www.csdn.net/article/2014-05-13/2819739-responsive-frameworks-for-web-design 对于设计师而言,网站设计中的任意一环节都不容忽视.时下,借助网上的一些资源,只需简单的几个步骤你就可创建出更具吸引力的设计,包括菜单.背景.动画.眉头.body等设计.响应式Web设计不仅能够适用于任何屏幕尺寸,还为用户带来更完美的体验,本文将分享十款最佳的响应式Web设计,助你大大简化工作流程. Gumby Framework

响应式Web设计:Media Queries和Viewport的困惑

最近在研究响应式web设计,发现其实这东西其实挺难的,Media Queries和Viewport这两个概念就让人非常头疼,到底是只用其中一种就行,还是两者必须配合起来用,正在困惑的时候,发现了以下这篇文章,虽然没有全懂,但是似乎了解又更近一步了. 前言 现在使用移动设备人越来越多,移动版的Website随之也越来越重要:但是移动端设备的大小不一,屏幕分辨率各不相同,我们不可能为BlackBerry,iPhone, iPad等等每个都做单独的页面设计.所以我们需要的Website设计要能迎合多种

css014 响应式web设计

css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. 二.    为RWD构建网页 1.            手机浏览器中为了忽略手机浏览器屏幕变小字体也变小的行为,可在head中添加一行代码: <meta name="viewport" content="width=vedice-width"> 最好是添加

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

1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376

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

从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出

[转载]从网易与淘宝的font-size思考前端设计稿与工作流

原文地址:http://www.cnblogs.com/lyzg/p/4877277.html 原文作者:流云诸葛 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅

web页面设计稿的完美还原

以前Firefox有个插件,可以把设计稿载入进去,设置成半透明,然后这样布局有所参照,可以尽可能完美的还原页面,甚至精确到像素.但 是随着FF的不断升级,那个插件很久没有更新,已经不能用了. 当然我们也有其他方法实现,此神功威力强大,但是内力消耗也甚大,慎用,慎用. 对眼神功上篇 html:after,body {    display: block;    position: absolute;    top: 0;    left: 0;    padding: 0;    margin:

响应性web设计实战总结

响应性web设计实战 响应性web设计的理念是:页面的设计与开发应当根据用户行为与设备环境(包括系统平台,屏幕尺寸,屏幕定向等)进行相应的响应及调整.具体的实践方式由多方面组成,包括弹性网格和布局,图片,css Media(媒体查询)使用等. 一:布局方式有如下几种:       1. 固定布局:固定布局以PX(像素)作为单位的,在PC端,设计稿多少PX就写多少PX,前几年都是这种布局,常见的是以960px或者1000px来设计的,但是这样设计有如下缺点: 1.页面很死板,在更大的屏幕上,页面左