九游会客户端app媒体查询和iPad 3的思考

九游会客户端-周四，2012年3月22日

移动设备和非移动设备之间的界限已经模糊了一段时间. 我们有介于手机和台式机之间的平板电脑和上网本, 甚至其他设备，如游戏控制台浏览网页, 所有这些都有不同的屏幕尺寸, 决议, 和密度. 在iPad 3中，我们有一个9.7英寸的屏幕，比绝大多数桌面显示器的像素都要高. 在不使用完全独立的手机版本的情况下，在如此大的屏幕尺寸上显示网站的典型方法, is using CSS media queries; in particular, min-device-width和max-device-width查询.

然而，最小设备宽度和最大设备宽度并不能区分iPad 2和iPad 3. 这是因为对于媒体查询，iPad3报告的分辨率是1024x768，就像ipad2一样. 苹果在iPhone 4上做了同样的事情——它使用iPhone 3GS的分辨率来处理媒体查询. The reason for this is simple; the screen size is the same. 如果iPad 3报告了准确的分辨率, 那些为iPad 2优化版本的网站会把iPad 3当作桌面浏览器. 此外，如果没有将样式缩放到指定大小的两倍，大多数站点将很难阅读. 区分两者的解决方案是媒体查询-webkit-device-pixel-ratio. 数值为2表示retina显示屏，即iPad 3或iPhone 4+. 1表示正常屏幕, 但是因为只有某些webkit浏览器支持这个属性, 您可能应该假设为1，并指定覆盖2.

大多数台式机的屏幕密度被认为大约为72 ppi(每英寸像素),)意味着288像素的图像将占用大约4英寸的屏幕空间. 在iPad 3的原生密度(264ppi,)同样的图像只会略多于一英寸宽. 因此, 除非另有特别说明, 视网膜显示屏将使网页元素的像素大小增加一倍. 这使得字体变得非常清晰和清晰，因为它们使用了两倍的像素来渲染. 但是对于图像来说，如果简单地将分辨率提高一倍，视网膜显示屏的优势就会丧失. iPad 3的图片大小是iPad 3的两倍，这意味着你的图片和文字一样清晰锐利. 缺点是现在你的图像使用四倍的像素(两倍的宽度和两倍的高度),)使文件大小更大，并损害下载时间. 这取决于你决定在两个方向上优化多少.

在某些情况下, 为你的网站创建一个完全独立的手机版本是很有必要的. 是否这样做完全取决于你自己，取决于你个人项目的细节. 无论哪种情况, 你应该记住，简单地将手机和非手机区分开来可能会受到很大限制. iPad(以及其他平板电脑)当然具有类似移动设备的特性, 但它的屏幕尺寸足以支持比手机更强大的网站. 有不同的版本, 你必须决定是让平板电脑获得手机版本还是非手机版本, 或者如果你想创造第三个, 平板专用版本. 与媒体查询, 您可以适应几种不同的屏幕分辨率, 还有一个好处是更经得起未来考验.

我当然认为那些网站上的一个, 响应式版本实用, 媒体查询是使其跨平台运行的一个重要部分. 但重要的是要意识到它们通常不是唯一的部分. 使用轻量级JavaScript库来处理基于媒体查询的多个图像分辨率, 或者通过使用background-image属性来提供不同大小的图像，以避免在小屏幕上加载大图像. 注意，有些设备, iphone在特定, 下载隐藏元素的背景图片, 所以简单地用CSS隐藏元素是不行的. 事实上, 指定“默认”背景图像, 然后用媒体查询覆盖它可能会导致设备下载两个图像. 处理方法是使用媒体查询指定两个版本的背景图像. 一个带max-device-width，一个带min-device-width.

如果你在所有设备上使用一个响应式网站, 你要确保没有重叠, 特别是对于较小的设备. 最好从构建最小版本开始，然后循序渐进地添加内容. 如果做正确, 这还有一个额外的好处，即不支持媒体查询的设备将获得最小版本. 除了前面九游会客户端app图像的提示外，您还应该记住其他资源. 例如, 假设你有一个大型JavaScript库，它处理一些高级技术，但你没有向移动用户显示这些技术. 让他们下载JavaScript来获得未使用的效果就变得毫无意义了, 你应该使用一个(小型)JavaScript解决方案来决定何时加载更大的库. 即使是HTML也会导致不必要的膨胀. 如果你的网站对移动用户隐藏了很大一部分内容, 您可以考虑将它分成多个版本, 或者使用AJAX加载桌面部分. 记住，除了小屏幕之外, 移动设备上的用户通常拥有更有限的处理器能力和内存, 并且经常要处理不太理想的连接条件. 考虑到这些局限性，满足地为他们服务，你会做得很好.

九游会客户端
九游会客户端是一家专注于全方位服务的创意机构 网页设计, 打印, 身份, 品牌, 界面设计, 视频制作, 静止摄影 而且 运动设计. 用我们对卓越的热情，多元文化背景，和 获奖 实践, 我们一贯提供高品质的, 自定义, 创新的解决方案，以满足客户多样化的营销需求. 欲了解更多信息，请访问 www.MatchaDesign.com.