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
CSS3 Media Queries Test on your browser Style Master CSS Editor for Windows and Mac OS X Cool Tools and Toys for Web Developers John, the lead developer (ok, pretty much the only developer) of Style Master is an avowed hacker. He loves exploring and experimenting with the latest features in browsers. Here's a collection of tools for web developers he's put together to help you analyse and debug your sites (and other people's sites as well), play with CSS3 features (bleeding edge browsers recommended) and more. XRAY works in Safari, Firefox and Internet Explorer. It helps you visualize the layout of your page. XRAY uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. MRI helps you create the best possible selectors for your CSS. MRI also uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas. CSS3 Sandbox Gradients Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3). Shadows CSS Transforms Coming soon
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
Don’t use IDs in CSS selectors? ❧ Oli.jp (@boblet) Recently I came across the post by Matt Wilcox called CSS Lint is harmful, ranting about the useful free tool CSS Lint. The “Don’t use IDs in selectors” suggestion seems to have offended Matt the most, but I was surprised that many commenters also mentioned this as being a reason to avoid CSS Lint. This surprised me because smart people have been saying prefer classes to IDs for a while now. The article was light on reasons why this suggestion might be bad, but it boils down to: Performance — IDs are “the fastest way a browser can select a given element”If they’re already in the markup it’s best to use them for CSSI’ve been using IDs like forever… waddya mean I shouldn’t use them!? Performance # It’s a common belief that ID selectors are the fastest, but this comes with a big caveat: IDs are fastest CSS selector only if they’re the key selector. #home a {…} We’d generally read this selector as find the element with id="home", then apply these styles to every a it contains. Conclusion #
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
html - Vertically align an image inside a div with responsive height 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.
Very Simple CSS-only Proportional Resizing of Elements | Well Caffeinated A while ago I posted about Proportional Resizing of Web Page Elements Using Only CSS. At the time, it seemed like the only solution… but fortunately a slightly counter intuitive CSS standard provides a much better way to get this same effect. Credit goes to Nathan D. The concept is nicely discussed in Matt Snider’s Blog Post Doing a little research, I was reminded that when you use percents to apply the margin of an element, the browsers determine the actual size of the margin by multiply the percent against the width of the parent node (this is true for margin-top, -right, -bottom, and -left). This could come in handy for a few things. For example, if I have a container with a child element like so: I can use the following css to give the child element an aspect ratio of 4:3 But, of course, if we put any content inside the child it will change the height and throw off our aspect ratio. <div class="container"><div class="outer"><div class="inner">Your content</div></div></div> and css
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:
Demo: Adaptive Design With Media Queries Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vimeo Video YouTube