iOS之苹果设备尺寸及数据

iPhone设备

物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。

代数 设备 操作系统 逻辑分辨率(point) 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
iPhone
第一代 iPhone 2G iOS 1 320 x 480 480 x 320 3.5寸 1x
第二代 iPhone 3 iOS 2 320 x 480 480 x 320 3.5寸 1x
第三代 iPhone 3GS iOS 3 320 x 480 480 x 320 3.5寸 1x
第四代 iPhone 4 iOS 4 320 x 480 960 × 640 3.5寸 2x
第五代 iPhone 4S iOS 5 320 x 480 960 × 640 3.5寸 2x
第六代 iPhone 5 iOS 6 320 x 568 1136 x 640 4.0寸 2x
第七代 iPhone 5S/5C iOS 7 320 x 568 1136 x 640 4.0寸 2x
第八代 iPhone 6 iOS 8 375 x 667 1334 x 750 4.7寸 2x
第八代 iPhone 6 Plus iOS 8 414 x 736 2208 x 1242 (1920×1080) 5.5寸 3x
第九代 iPhone 6S iOS 9 375 x 667 1334 x 750 4.7寸 2x
第九代 iPhone 6S Plus iOS 9 414 x 736 2208 x 1242 (1920×1080) 5.5寸 3x
iPhone SE iOS 9 320 x 568 1136 x 640 4寸 2x
第十代 iPhone 7 iOS 10 375 x 667 1334 x 750 4.7寸 2x
第十代 iPhone 7 Plus iOS 10 414 x 736 2208 x 1242 (1920×1080) 5.5寸 3x

如图所示:

这里写图片描述

Tips:

机型 屏幕宽高比
iPhone 5 320÷568=0.563
iPhone 6 375÷667=0.562
iPhone 6 Plus 414÷736=0.5625

最终发现iPhone5和6一个小秘密,它们的比例是不变的

iPod设备

设备 操作系统 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
iPod Touch 1 iOS 1 480 x 320 3.5寸 1x
iPod Touch 2 iOS 2 480 x 320 3.5寸 1x
iPod Touch 3 iOS 3 480 x 320 3.5寸 1x
iPod Touch 4 iOS 4 960 x 640 3.5寸 2x
iPod Touch 5 iOS 6 1136 x 640 4.0寸 2x
iPod Touch 6 iOS 8 1136 x 640 4.0寸 2x

iPad设备

设备 操作系统 物理分辨率(pixel) 屏幕尺寸(对角线长度) 缩放因子
iPad 1 iOS 3 1024 x 768 9.7寸 1x
iPad 2 iOS 4 1024 x 768 9.7寸 1x
iPad 3 (The New iPad) iOS 5 2048 x 1536 9.7寸 2x
iPad 4 iOS 6 2048 x 1536 9.7寸 2x
iPad Air iOS 7 2048 x 1536 9.7寸 2x
iPad Air 2 iOS 8 2048 x 1536 9.7寸 2x
iPad Pro iOS 9 2732 x 2048 12.9寸 3x
iPad mini iOS 6 1024 x 768 7.9寸 1x
iPad mini 2 iOS 7 2048 x 1536 7.9寸 2x
iPad mini 3 iOS 8 2048 x 1536 7.9寸 2x
iPad mini 4 iOS 9 2048 x 1536 7.9寸 2x

(经常需要查询的设备像素比:转载自 http://blog.csdn.net/scorpio_27/article/details/52297643)

职业瓶颈

代码写了有一段时间了,依然还是最喜欢的前端工程师。前端也一直在推崇出新各种新技术、框架、架构思想。到了30岁这个尴尬的年龄势必面临着转型的问题。最近也接触了不少新的玩意儿,还是觉得好好做技术才是自己喜欢的东西。我不太同意普遍说的IT工程师到了30岁转到管理岗,反倒是最近这么些年好多公司对工程师,特别是有经验的工程师需求越来越旺盛,薪资水平甚至超过了大多的管理岗。这得益于李总理和国家政策大力推广互联网,也是顺应了时代发展的脚步,现在应该就是工程师们最好黄金时代。

接下来,应该还是会在技术的路上走两年,好好把系统架构,分布式,各种调优工作好好补习补习,补充一些算法和数据库的知识。好了,就这样吧,近期也挺忙的一直没时间更新博客,搞定产品的迭代版本后,把AngularJS的一些使用心得拿出来分享一下。

WebPack 傻瓜指南

知乎上的WebPack三连击,非常实用的东西。分享一下。

  • Webpack傻瓜式指南(一)http://zhuanlan.zhihu.com/FrontendMagazine/20367175
  • Webpack傻瓜式指南(二)http://zhuanlan.zhihu.com/FrontendMagazine/20397902
  • Webpack傻瓜式指南(三)http://zhuanlan.zhihu.com/FrontendMagazine/20522487

 

前端重构Sass的相关使用(笔记二)

Sass 使用中有一个 Amazing 的功能,配合着 compass 能够做出非常多高效的工作,首当其冲的就是自动化雪碧图工具。

雪碧图自然不用多说,做过前端的开发都知道雪碧图。好处呢在于能够大大节约网络的开销,把Http请求降低。自然在原来的前端开发中,制作的成本也是偏高。环境安装请看这里?http://www.html-js.com/article/CSS-solves-the-installation-and-debugging-of-SASSCompass-scheme

环境Ok之后,通过命令确认安装完毕。

1

创建工程请执行 compass create app

2

继续阅读

Gulp前端自动化工具

前端日常工作是什么?拿到PSD图,然后开切!首先我们建立一个app的文件夹,然后在app下,我们建立img文件夹,接下来是 css …… 项目终于搞定之后,我们要使用在线压缩工具把样式表进行合并压缩,把所有的大尺寸图片重新导入Ps,保存为 web 格式,然后调整质量 。。。。。。

你就没想过偷懒的办法么?你就是这么把时间耗在没有意义的简单机械的活儿中么?

或者,很多前端都已经开始使用Grunt这样的工具了,自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错,基于Grunt另外推出了非常多的 generate ,类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等,但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置,则是异常痛苦。

gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。

通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例,所以不能妄自评论。下面就浅谈一下两者之间的使用细节。

这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子:

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

Gulp

gulp.task('sass', function() {
  return gulp.src('src/styles/main.scss')
    .pipe(sass({ style: 'compressed' }))
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('dist/assets/css'))
});

不管从代码还是从阅读性上来说,Gulp 不是更加优越一些嘛?从代码的输入和输出,以及事件的操作顺序一幕了然,完全不用在复杂的GruntFile中间去找各种各样的变量表达式。妈妈再也不用担心我的学习!

那么我们来一个简单的Case吧。

首先确保你安装了NodeJS。

然后运行 继续阅读

前端重构Sass的相关使用(笔记一)

随着Sass与Less的使用越来越多,相比越来越多的前端攻城师都体会到它们的优越性。前端由于一部分工作都是在Html,Css中的编码进行的。好的工具在开发的过程中对效率值的贡献尤为重要。使用Sass有一段时间。在这里也做一个分享。让更多需要的人快乐的编码。

Sass,Less,Scss 都是一些什么东西?

简单的理解来说,它们都属于对原有CSS的扩展。能够更加方便的书写样式规则,强化了Css原有的功能。Sass,Scss 都是来自同一个妈。

Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(SassyCSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。

基本语法参考:

c76fd27f54f465484be3c45d06e4cd6d
而Less比较特殊,功能大体上差不多。在前端导入less.js也能在客户端解析link中的.less文件。基于Dom解析与渲染速度,个人不太赞同这种做法。Less也有服务器端版本。因为篇幅原因,在这里就不做介绍了。有兴趣的同学可以去参考这里。 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

Sass 新语法中添加了很多很有意思的东西,变量、混合、嵌套、样式继承等。辐射到周边的Compass应用能够对生成的样式表文件进行压缩、合并,减小服务器带宽、加速界面响应速度。通过几个简单的例子,介绍一下这些非常实用的功能。

  • 嵌套
    /* 生成代码 */
    nav ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li{
      display: inline-block;
    }
    /* SCSS语法 */
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li { display: inline-block; }
    }
  • 变量定义
    $blue : #1875e7; 
    div {
      color : $blue;
    }
  • 混合
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
          border-radius: $radius;
    }
    .box { @include border-radius(10px); }
    
  • 样式继承
    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;
    }
    
    .error {
      @extend .message;
      border-color: red;
    }

进阶功能介绍,Css常用开发功能 雪碧图与文件合并压缩。请参考笔记二(待更新)

程序员日记五-感谢所有关心我的朋友

现在是北京时间:2014年9月17日2:08:26 。一个人在床上翻来覆去的睡不着,完全不知道在想一些什么样的事情,索性干脆起床继续看看资料和新闻。翻到关于JavaScript中模块化管理的章节,顺势就阅读了AMD的相关规范内容,异常感叹IT技术的更新变革的效率。前端开发的工作已经从最初的Function时代大大跃进到了一个新的领域。异步处理这样的工作方式也将会在服务器端有所作为。

离开拓维的半年时光,过得蛮瞎的。时间和现实在一点点侵蚀着当初的理想和创业的决心。首先感谢最近一直关心我的同事和朋友。感谢你们热心的给我介绍各种各样的工作。感谢在我需要帮助的时候给我这么多的工作机会。感谢能够听我倾诉内心的不愉快以及给我各种各样的建议。在各种聊天的字里行间,其实我内心还是坚定自己出来的信念。在各种技术研讨交流会上,也慢慢的清晰了自己的定位。对自己的职业规划也有一个基本的定型。期间,结识了很多朋友,也收获了很多宝贵的创业经验。我相信现在的不愉快和低落的情绪都会随着时间的推移慢慢磨平。斗志和激情一直都是不会被磨灭,这段时间给我的教训无非也就是那么几句老话,打铁还需自身硬。独立、效率的工作才是靠谱的东西。都说罗马不是一天建成,无非只是看是几个人建还是一个人建,只有踏实的做,“罗马”才会欣欣向荣。