Tagged

iphone

A collection of 8 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. 默认全屏

Safari

iPhone Safari 下 input disabled 颜色

最近在项目中遇到需要修改 input 的 disabled 状态的颜色的情况,然而无论如何都不成功,折腾了好久。后来发现还是 User Agent 样式的问题。 iPhone Safari/webview input disabled 的默认样式: input:disabled{ opacity: 0.4 } 嗯,开发者工具只能看到这一条。 即便是 reset 为 opacity : 1 也无效。因为还有一条隐藏的样式 -webkit-text-fill-color ,于是有效的样式为 : input:disabled{ color:@disabledColor; opacity: 1; -webkit-text-fill-color: @disabledColor; }

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

iphone

主流移动设备的屏幕参数

iPhone 5昨夜发布,早上起来看到了一些新iPhone的参数信息,于是好奇历代iPhone的屏幕参数,然后在维基百科发现了大部分主流移动设备的屏幕信息,这比iPhone 5本身给我的惊喜还要大!! 这些信息包括屏幕分辨率、宽高比、ppi、aspect ratio、css pixel ratio等,对我们开发面向移动终端的网站比如响应式设计可以提供比较全面的参考信息。 这里不多罗列,直接访问维基百科的页面吧~~

ios5

iPhone 4S 浏览器性能预览

iPhone 4S已经正式发售,虽然在国内还只能是水货,但是显然已经国外的同行已经开始研究它能给我们带来的改变了,而我们关注的,依然是浏览器~~ iPhone 4S硬件主要升级CPU和GPU,而这些给升级也为浏览器性能带来了很大的提升: **Apple****iPad****iPhone 4****iPad 2****iPhone 4S****SoC****A4****A5****处理器**1 GHz ARM Cortex-A8 (单核)800 MHz ARM Cortex-A8 (单核)1 GHz ARM Cortex-A9 (双核)800 MHz ARM Cortex-A9 (双核)**内存**256 MB LP-DDR (单通道)512 MB LP-DDR (单通道)

HTML5

iOS 4.2版safari对HTML5特性支持更新

文章整理自 [Safari on iOS 4.2: Accelerometer, WebSockets, SVG, AJAX2 & better HTML5 support ](http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5)请尊重版权,转载请注明出自[前端观察](http://www.qianduan.net)嗯,据说iOS 4.2发布了,所有的iPhone,iPod、iPad啥的,都可以免费更新。令人欣慰的是,这个版本的iOS对HTML5新特性的支持有比较大的升级,其中包括对WebSockets和加速器(Accelerometer)的支持,新的event、支持打印、新的JavaScript 数据类型和更好的SVG支持。 事实上,Apple还没有更新Safari文档。这里的信息只是基于在Safari(注:文中的Safari指iOS移动设备中的Safari浏览器,不包括PC和Mac机中的Safari)自身的JavaScript研究和测试上。

iphone

网站设计趋势: iPhones

原文:[网站设计趋势: iPhones](http://www.qianduan.net/web-design-trends-iphones.html) 译自:[Web Design Trends: iPhones](http://www.leemunroe.com/iphone-websites/) 版权所有,转载请注明来源,多谢!- - - - - - 众所周知当前(甚至接下来的几年)最酷的东西是iPhone。**不仅仅是因为iPhone看起来不错,它们在网站方面也很不错。**而且,更重要的是,很多公司和团队为iPhone开发了很多很有用或有趣的App,当然iPhone的用户也会对他们的网站很感兴趣。事实上,针对iPhone的网站设计已经成为了另外一个趋势,虽然它的针对性不是那么广泛…… iPhone GUI PSD 首先给大家推荐一下Teehan+Lax的iPhone GUI PSD 文件,它包含了iPhone以及你制作你的iPhone界面时所需的所有元素。非常方便,

iphone

13个漂亮的mac和iphone App网站设计

译自:[ WebDesignLedger ](http://webdesignledger.com/inspiration/13-beautifully-designed-mac-and-iphone-app-websites) 中文:[13个漂亮的mac和iphone App网站设计](http://www.qianduan.net/13-beautifully-designed-mac-and-iphone-app-websites.html) 版权所有,转载请注明出处,多谢! - - - - - - 在某种意义上,苹果品牌就意味着好设计。这也意味着在美学上,很多针对mac和iPhone的应用和苹果保持着某些关联。为了和苹果品牌保持同样高的质量,这些应用的设计师做了很多工作。这在这些软件自身和它们的网站上表现的很明显。这些网站有某些共同的东西,比如色彩的完美应用、大而精细的图标、以及完美的按钮。 atebits Realmac Software Tapbots Bohemian Coding Acrylic Cultured Code Font Explorer X Tao Effect