![]() The real value should be around 2.60 however Apple has decided to give a shot on a new concept: rendered pixels, emulating a 3x device pixel ratio. The iPhone 6 on the other way with 401 dpi needs a higher value. In terms of Device Pixel Ratio, the iPhone 6 follows the same value as the previous Retina devices, using a value of 2. You can emulate this viewports right now for testing purposes just changing the viewport Maybe it’s not a big deal but you should check if your websites are flexible enough to take advantage of the additional 14/15 pixels and you don’t have any visual glitch because of that. This means roughly that we will see things 4% smaller on iOS compared to similar Android devices. While on Android 4.7-5″ devices will give you a viewport’s width of 360, iOS will deliver 375 and while on Android 5.5″ devices (such as Galaxy Note) you get a 400px viewport, on iPhone 6 plus you get a weird 414px width. However, the values Apple is using are not matching 1:1 the current values on the market, such as on Android. In a good decision, Apple has decided to bring us more space for content on iPhone 6 and iPhone 6 plus because they are wider than the previous versions. You probably know that until today, all iPhones and iPods exposes a 320 CSS pixels width when using that viewport declaration. If you are reading this post you probably know the viewport meta tag and the value width=device-width that we are used to to match the viewport size (the canvas where we render the page with the real screen size to avoid the zoomed out experience that we get when we open a desktop website on a mobile device. There is an excellent review of iPhone 6 screen sizes at iPhone 6 Screens Demystified Viewport size # In terms of web development, the changes are in different places: default mobile viewport (when using width=device-width), pixel ratio useful for responsive images, icon sizes and launch images. ![]() ![]() These new resolutions fall into what Apple called “Retina HD” displays, meaning… well, different than the previous Retina devices. The iPhone 6 has 4.7″ and 750×1334 physical pixels (same 326dpi as iPhone 5s) while the iPhone 6 Plus includes a bigger 5.5″ with a Full HD 1080×1920 resolution (401 dpi). The iPhone 6 and iPhone 6 Plus are coming and with new screen sizes new challenges in terms of viewport and image sizes come with them. Resolution media queries with dppx unit.The Remote Web Inspector works only from Yosemite if you are still on previous versions of Mac you can use a Nightly WebKit build.Ĭompared to other mobile browsers, these are the features that didn’t come up on iOS 8:.File Uploads are not working anymore (bug).SPDY (I couldn’t find a way to test this, any suggestion?).Web and native App integration, including the ability share login data.Autofill for forms, including credit card scanner with OCR.CSS: Shapes, subpixel layout (hairline borders).Images: Support for Image Source Sets (srcset) and Animated PNG format.Safari Extensions allowing native apps to be used as plugins inside Safari that can read and modify the DOM.Video playing: CSS layering, Fullscreen API and Metadata API.Scroll events useful for Parallax effects.Native hybrids: Improved and faster WebView.HTML5 new APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API and Crypto API.I’ve been playing with the final version and here you have my findings.Īs we are used with the company, Apple didn’t update any of the docs regarding Safari and iOS so all of the information here is based on my own testing and some information delivered at the WWDC. New APIs appears on scene, as well as new challenges to support the new screen sizes. IOS 8 is finally here while the new iPhone 6 and iPhone 6 plus will appear in a few days. Next evolution for Safari and native webappsīy Maximiliano Firtman Twitter About Newsletter IOS 8 and iPhone 6 for web developers and designers IOS 8 and iPhone 6 for web developers and designers - v
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |