A tale of two viewports — part two
Page last changed today Related files: Part one of this article, about desktop browsers. Compatibility tables. The full list of browsers can also be found here. Many thanks to Grace Kloba (Google), David Storey and Anne van Kesteren (Opera), Mike O'Malley (Microsoft), Kartikaya Gupta and George Staikos (RIM), and Mark Finkle (Mozilla) for reviewing earlier versions of this piece and providing me with valuable feedback. This article has been translated into Russian, Chinese, and Korean. In this mini-series I will explain how viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen. On this page we’re going to talk about the mobile browsers. When we compare the mobile browsers to the desktop ones, the most obvious difference is screen size. A mobile screen is far smaller than a desktop screen; think about 400px wide at maximum, and sometimes a lot less. Let’s go back to our sidebar with width: 10%. Meaning Measured in Problems
Graphic display resolutions
Aspect ratio[edit] Multiple display standards compared. The gradual change of the favored aspect ratio of mass market display industry products, from 4:3, then to 16:10, and then to 16:9, has made many of the display resolutions listed in this article difficult to obtain in mass market products. The 4:3 aspect ratio generally reflects older products, especially the era of the cathode ray tube (CRT). The 16:10 aspect ratio had its largest use in the 1995–2010 period, and the 16:9 aspect ratio tends to reflect the current (post 2010) mass market computer monitor, laptop, and entertainment products displays. The 4:3 aspect ratio was common in older television cathode ray tube (CRT) displays, which were not easily adaptable to a wider aspect ratio. Video Graphics Array[edit] QQVGA (160x120)[edit] Quarter-QVGA (QQVGA or qqVGA) denotes a resolution of 160x120 or 120x160 pixels, usually used in displays of handheld devices. HQVGA (240x160)[edit] QVGA (320x240)[edit] QVGA compared to VGA
Mobile Browser Detection
When creating mobile web apps like our wordpress theme series, it is important to be able to detect a mobile browser and serve the appropriate mobile version. Many readers requested information on how to do this in the comments, so here it is! First, we will cover a wordpress solution, then a PHP solution, and then a popular existing solution. By the end of this tutorial, you will be exposed to the whole spectrum of options and well equipped to handle this scenario! In MyTouch With wordpress, we have a lot of tools out there already to help us, including plugins. Upload MyTouch In order to use a second mobile theme for a site, you first need to define the directory where you will put your mobile themes in MobilePress. Upload your theme to this directory, and then click on MobilePress > Themes and select our theme. Click on the theme to enable it for the default mobile browser. iPhone Testing Android Testing Now we can serve the appropriate theme to all users! How to Get Browser Type Redirect
Awesome Mobile Image Gallery Web App
With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic […] View demoDownload source With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre. Our little application is going to show some albums in a list view which will reveal a wall of thumbnails once it’s clicked. This app is best viewed on a mobile device like the iPhone or the iPod Touch, or in a Webkit Browser like Google Chrome or Safari.
Developing for Multi-Touch Web Browsers
Introduction Mobile devices such as smartphones and tablets usually have a capacitive touch-sensitive screen to capture interactions made with the user's fingers. As the mobile web evolves to enable increasingly sophisticated applications, web developers need a way to handle these events. For example, nearly any fast-paced game requires the player to press multiple buttons at once, which, in the context of a touchscreen, implies multi-touch. Apple introduced their touch events API in iOS 2.0. Android has been catching up to this de-facto standard and closing the gap. In this article I’ll dive into the touch events API provided by iOS and Android devices, as well as desktop Chrome on hardware that supports touch, and explore what sorts of applications you can build, present some best practices, and cover useful techniques that make it easier to develop touch-enabled applications. Touch events Three basic touch events are outlined in the spec and implemented widely across mobile devices:
Seven Guidelines For Designing High-Performance Mobile User Experiences - Smashing Magazine
Advertisement A positive first impression is essential to relationships. People look for trust and integrity, and they expect subsequent encounters to reflect and reinforce their first impression. Users expect mobile services to be relevant and user-friendly and to perform well. In this article, we’ll discuss performance in relation to design and present seven guidelines that can help shape design decisions related to performance while accounting for the needs of end users and businesses. Performance For Mobile People use their mobiles to enhance productivity, comfort and pleasure, everywhere and at anytime: waiting for the bus, walking on the sidewalk, checking which platform their train leaves from. Paradoxically, we’ve noticed that many mobile design cycles start with requests for great aesthetics first: “It has to look amazing!” 1The visuals in the Twitter app are not as rich as Cookmate’s (which are stunning), but reviews for the Twitter app in the App Store are much better. 1. 2.
Mobile Browser ID Strings (a.k.a. User Agent ID)
The non-mobile stuff is here (hint: you get jerked back by the power cord after 3 feet and your arms start to ache after 10 minutes with non-mobile stuff) or click on any right menu link for the browser/section. We started these pages with four strings because we had never seen a comprehensive list anywhere. Nominally RFC 1945 and RFC 2068 define them (get RFCs) but only as an afterthought (the RFCs define HTTP 1.0 and 1.1). Browser IDs, more correctly User Agent IDs, appear, among other places, as the environmental variable HTTP_USER_AGENT in Apache. You need this information to make the fewest checks possible for the browser environment or to optimise the display or ... to know who and what is crawling around your site. New Stuff: It's been a loooong time since we did an update. Department of useless stuff: Anyone know the difference between Open Mini and Mobile...no it's not the beginning of a joke. Getting the Strings for Nefarious Purposes (and in Other Formats) Notes: PHS Networks
