Tagged

ios

A collection of 7 posts

ios

web app 一分钟适配 iPhone X

明天就要开抢 iPhone X 了,然而面对 iPhone X 这个奇葩的屏幕,你准备好了吗? 因为 iPhone X 的刘海设计,Web 在 iPhone X 横屏时,可能会有些问题: 默认情况,iPhone X 会将页面填充到安全区域(safe area),就像上面的图一样,一般情况下是没有问题的; 但如果是全屏 Web App 就会有问题了,比如背景色和页面的契合程度之类的; 有的 iOS app 内置 WKwebview 可能会为了避免一些bug,而采用统一的行为,就是禁用 iOS 11 自己的内容区域判断,从而让 H5 默认全屏,如下图: 解决方案 1. 默认全屏

ios

iOS 10 明天发布,你怕了吗?

3个月前,我汇总了 iOS 10 中 Safari 的新特性,输出为《Safari 10 越来越像理想中的浏览器了》,嗯,Safari 10 对前端的支持确实令人欣慰。然而,还有一个非常重要的事情需要关注: iOS 10 要求 app 必须启用ATS ATS(App Transport Security)是苹果在 iOS 9/OS X 10.11 中开始引入的特性,旨在提高 app 的安全性,要求 app 的 HTTP 通信必须是加密的,而且还要求 HTTS 连接建立在 TLS 1.2 协议以上 (嗯,

android

用Ionic开发hybrid APP

转载自:用Ionic开发hybrid APP 原作者:xiaodao 请尊重版权,转载请注明来源,谢谢~~ 使用phonegap开发APP的优劣在此不必细说,快速,简单,跨平台,以及随着iOS,Android本身对webview优化所带来的不错的性能,便是其独有的优势。而且私以为在目前激烈而又变化快速的移动APP市场环境下,用phonegap来开发APP未尝不是一种低成本mvp的方案,快速发布,成王败寇^-^ 为什么选用ionic 其中ionicframework便是phonegap开发hybrid APP技术中的一员新秀,甚至可以说是一员虎将,而且免费且开源。 Ionic的优势非常显著: 性能优异 基于红的发紫AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃, 相关配套非常齐全: - 相对充足的学习资料,Learn Iconic,The Iconic book ngcordova,将主流的Cordova API或者Cordova插件封装为AngularJS扩展,使用非常方便。 开源免费的webfont icon库ionicons,基本满足你icon需求。 甚至最近开发出的可视化开发工具Ionic Creator 最后便是至关重要的,

ios

Photoshop中改进ios设计流程的30个诀窍

设计是一个漫长和痛苦的过程,期间可以用点技巧来减少痛苦,30+ tips to improve your iOS design workflow (in Photoshop)一文总结31个实用的技巧可以借鉴和学习。 ————–以下为译文——————- 在本文中我(英文原作者)总结了在photoshop中设计ios软件时所遵守的方法。许多的技巧适用于一般的UI设计。注意:文中所提到的快捷键针对于Windows;Mac 用户可,Cmd对应Crtl键,Opt对应Alt键。 1.保持尺寸为偶数 你是首先针对Retina屏幕设计然后再对标准分辨率的进行缩小是吧?为了在标准分辨率下像素仍然保持完美的呈现,你需要保证大小和距离为偶数。具体的做法便是:基于2ps的网格设计。在编辑(Edit)〉首选项(Preference)〉参考线、网格和切片(Cuides,Grids&Slices)。更改**网格线间隔(Gridline)和子网格(Subdivisions)**来是使得网格间隔线为2px。例如:设置网格线间隔为64px,

ios

移动终端设计和开发类书籍推荐

移动终端市场越来越热闹了,而传说现在中国每卖10部手机有9部都是android——虽然剩下不到一层的iphone带来的网络有流量比这9成的android用户还多~~恩,很多人都开始转向移动终端设计和开发了吧。 这里推荐几本相关的书籍,希望能够帮到大家。其实相信很多前端设计和开发的同学已经接触到移动终端的设计和开发了,剩下的人也都蠢蠢欲动了吧。恩,这是个趋势,移动互联网大时代已经来了~~ 设计类 自然用户界面设计:NUI的经验教训与设计原则 在卓越购买 | 在淘宝购买 貌似张小龙在分享微信成功经验时就提到,最好的设计就是自然——让用户感觉不到设计的存在。这本书看起来不错。 触动人心:设计优秀的iPhone应用 在卓越购买 | 在淘宝购买 非常不错的一本书,我很喜欢。 简约至上:交互式设计四策略 在卓越购买 | 在淘宝购买 卓越网口碑非常高的一本交互书。 交互设计沉思录 在卓越购买 | 在淘宝购买 传说中交互设计领域的扛鼎之作,交互设计领域思想领域多年经验结晶。 开发类 iOS5基础教程 在卓越购买 | 在淘宝购买 iOS5入门级书籍,很多人从此走上了小康之路。 Objective-C基础教程 在卓越购买 | 在淘宝购买 iOS编程的核心是Object-C,而这门语言已经是今年最热门的开发语言了。 Learning Android(

ios

iPhone 5/iOS 6前端开发指南

iPhone 5和iOS 6已经发布好几天了,相信很多童鞋都已经刷上了iOS 6。我们在之前就发表过《iOS 6中Safari对HTML5的支持》,但是除此之外,实际上市的iOS 6具体支持还有哪些新功能?让我们一起看下。 iPhone首先屏幕变长了,分辨率从iPhone 4s的640px960变成了6401136,长宽比变成了16:9。DPI依然是326。其它表现看起来是一样的。 检测iPhone 5/iOS 6 检测iOS 6很简单,用ua就可以了: Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403

HTML5

iOS 6中Safari对HTML5的支持

iOS6发布了beta版,其中包括了新版的Safari浏览器,增强了对HTML5的支持,我们来了解下吧~~ 目前,ios 5.1中safari在HTML5test.com的测试得分是324,而ios 6中safari的分数是360。 远程调试 新的远程调试工具可以更方便的在PC/Mac上对iOS上Safari中的页面进行调试,界面类似Android上的Chrome浏览器。** ** 终于支持这个了,可以在浏览器中上传照片文件什么的了。。。内牛满面。。。 Audio API 这个大家也期待已久了吧,不多解释 CSS3 Filter 这个我们之前有介绍过,最新的 chrome 19正式版已经实现了该功能但是默认并没有开启,你需要通过about://flags(chrome://flags)来开启。 离线存储(app cache)数据限制从5MB提高到25MB requestAnimationFrame webkit私有api,不过基本除了opera,各个最新的浏览器也都开始支持了,详情查看MDN的介绍。 横屏模式下支持全屏 也就是fullscreen api了。 其它更新 更快的Javascript 好吧,每次更新都会有这个,不算新闻了。