在用iPhone手机浏览网页的时候,点击分享按钮的时候,会有个添加到桌面的按钮。点击之后,就能把网站的快捷方式保存到桌面上,想一个app一样。可以方便用户快读的访问一些常用网页。

默认情况下,safari会自动的把当前页面的部分内容进行缩放截屏,然后生成一个icon,放在桌面上用来指代这个地址。

但是这种生成的图标会非常的不好看,一看就是网页,没法跟桌面上那些native app融合在一起。

苹果官方针对这种情况,提供了一个修改这个icon的方式,具体类似如下:

修改href值,然后放在对应页面的head里面,就可以了,具体效果可以尝试着用iPhone打开我的网站

效果还是很赞的

在iPhone上面保存到桌面的效果

另外,icon的尺寸推荐设置为114114,因为在iPhone上面的图标尺寸是5757,做两倍图,自然就是114*114了

今天在经历数番折磨之后,终于成功的把应用提交到iTunes Connect上面了,看到状态变成“Upload Received”,终于送了一口气,可是没过一会儿,刷新页面一看,状态就变成红色的错误“missing localized screenshots”

按字面意思就是缺少截屏,但是我的3.5inch 和 4inch的图都上传了4张,没问题啊。上网检索了一番,发现可能的可能情况如下:

  • iPhone5的没上传
  • 写了device适配iPad,但是没上传iPad相关的截图

我在应用详情里面编辑截屏,往4inch里面再上传了一张截屏,然后保存。保存的时候,提示我iPad的截屏没有上传。这个时候我就奇怪了,因为我这个应用是打算只发布到iPhone的。

回到xcode里面一看,玩蛋,devices里面写的是universe。现在只能看看iPad下面能不能正常工作了,可惜不能。

现在的问题就变成了如何取消已经上传的应用并重新上传

第一步:取消应用

进入itunes connect -> Manage Your Apps -> 点击对应应用 -> View Details -> Version Information -> Binary Details -> 进入之后,右上角有一个Reject This Binary

点击之后,会要求表明再次上传的包是否有修改,是否加密,以及广告策略

完成之后就能继续上传

第二部:重新上传

在xcode里面,点击对应的target -> General -> Devices 选择iPhone。重新archive,上传即可。

参考文章:
http://miraclei.net/index.php/2013/01/app-store上传应用程序后执行取消操作/

http://stackoverflow.com/questions/12760709/missing-localized-screenshots-error-on-itunes

http://stackoverflow.com/questions/17259886/itunes-connect-complains-missing-localized-screenshot-despite-iphone-5-screens

这篇文章主要是自己需要通过Media Queries完成一些工作时候,Google到的一些基本知识储备。所以总结的大部分会是一个链接,指向别的网站。

起因

昨天,因为工作的需要,在文章页底部留白用来展示广告,而广告是第三方的,会根据iPad和iPhone的不同而有不同的尺寸,所以对应的底部留白也需要不同的尺寸。

关于语法

请大家移步到这个博客一看,里面对Media Queries的语法描述的还是很不错的。

总结起来有以下几个要关注的:

  • 语法结构 @media [media_query] media_type and media_feature
  • [media_query] 有not和only两种,但是是可选项
  • media_type 因为现在大多数开发都是基于屏幕设备进行的,所以一般来说写screen
  • and media_feature 这个补充的关于设备的一些描述是可以重复添加的

文章中虽然也说明了Media Queries的一些兼容性问题,不过说的不是很全面,介意是到Can I Use这个网址去看看

后面将基于这个语法进行一些深入的了解

关于屏幕的一些概念

在设定media_feature的时候,device-width到底是什么,这个让我纠结了很久,后面总算是有点突破。其中的概念的区分,主要得益于这两篇文章:“The Relationship Between Screen Size and Resolution”和“width versus device-width”。

一般关于屏幕,有三种说法

Screen Size(屏幕尺寸)

按对角线的方式测量屏幕得到的,一般咱们说的4英寸屏幕、5英寸屏幕,说的就是这个

Screen Resolution(屏幕分辨率)

屏幕尺寸要表达的意思是类似的。是描述这个屏幕的实际宽高,一般都是用px作为单位,比如iPhone4的320×480,iPhone5的320×560

Resolution(分辨率)

这个概念就比较麻烦一点,因为牵扯到了Screen Resolution。比如iPhone4的屏幕分辨率是320×480,而它的分辨率是640×960。这是因为iPhone的retina屏的缘故,使得在实际宽度为320像素的屏幕上,一行能显示640个像素点。这样能够使得显示的画面在同样尺寸上面比一般的屏幕更加精致。

而CSS中使用Media Queries的时候,device-width指的是Screen Resolution——屏幕分辨率

针对iPhone2G-4s,iPhone5,iPad几个设备进行区分的Media Queries

关于区分设备的Media Queries,在上面提到的width versus device-width这篇文章中已经有了一些说明。但是“CSS Media Queries for
iPads & iPhones
”这篇文章实在是很齐全,很明晰,而且页面设计的超赞!

不过对他使用min-device-width和max-device-width的方式感觉有些不是很理解。比如iPhone4,屏幕分辨率是320×480,通过min-device-width:320px和max-device-width:480px就能确定到iPhone4。按我的理解是这样的做法考虑到了横屏和竖屏两种情况,可是在作者专门为iPhone4横屏情况下写的Media Queries的min-device-width和max-device-width还是没有变化,这就让我很是不理解。

不过代码是的确很有用,先记着,等随后有时间再来测试一下看看。当然如果有明白的,也希望能告知一下