Optimizing your layout for phones and tablets using viewport and media queries

Optimizing your layout for phones and tablets using viewport and media queriesAndreas Bovens - Opera Software

about me

http://www.flickr.com/photos/thomaaas/4783952591/

about me

http://www.flickr.com/photos/boccaccio1/

119626133/

about me

119626133/

about me

119626133/

http://www.flickr.com/photos/forcery/3511170176/

Chris Mills

Bruce Lawson Daniel Davis

Karl Dubost

Andreas BovensShwetank Dixit

Divya Manian

Luz Caballero

Tiffany Brown

Vadim Makeev Mike TaylorZi Bin CheahPatrick Lauke

Coherence Screen sharingSyncronization

Device shifting Complementarity Simultaneity

These patterns should help understand and define strategies for the multiscreen world.

“Patterns for Multiscreen Strategies”

By Precious http://slidesha.re/kiip5y

Coherence Screen sharingSyncronization

Device shifting Complementarity Simultaneity

These patterns should help understand and define strategies for the multiscreen world.

http://slidesha.re/kiip5y

Coherence

“A digital product or service looks and works coherently across devices. Features are optimized for specific device characteristics and usage scenarios.”

http://slidesha.re/kiip5y

http://slidesha.re/kiip5yCoherence

show top-left and pan

small screen rendering aka single column view

zoom and pan

That’s all nice, but what if I want to control

this zooming behavior?

Answer:viewport meta

This is the viewport

(not just this)

Most commonly though, you’ll want to focus on controlling page width...

... using a "viewport" meta tag in the <head> of the page.

works in:

with some exceptions ;-)

http://www.opera.com/developer/tools/mobile/

HVGA portrait

no viewport defined in <head>, so fallback to default of 850px,which is squeezed inside 320px.

HVGA portrait

HVGA portrait HVGA landscape

HVGA portrait

320px × 1.5 zoom

HVGA portrait

(same result as width=device-width)

+<div style="width: 600px">

HVGA portrait

HVGA portrait

maximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">

user-scalable=yes|no<meta name="viewport" content="width=320, user-scalable=no">

height=...<meta name="viewport" content="height=device-height">

other stuff

NB:Make sure to use commas, not semi-colons as delimiters between viewport values! Remember this, especially when syntax-googling ;-)

http://www.flickr.com/photos/33284937@N04/4771132618/

So, how to use this?Sniffing for mobile browsers maybe?

Better don’t sniff.

So, how to use this?Sniffing for mobile browsers maybe?

Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00

So, avoid sniffing,but if you really have to,provide a way for users to make corrections.

So, avoid sniffing,but if you really have to*,provide a way for users to make corrections.

* always ask yourself why the mobile site should be different from the desktop site

budget limitations

customer requirementstime restrictions

different layout neededcapabilities are different

budget limitations

different layout neededcapability detection

capabilities are different

budget limitations

different layout needed

viewport + media queries

capabilities are different

capability detection

Let’s talk aboutmedia queriesviewport + media queries

Media queries are conditional hooks for applying different CSS rules, depending on e.g. browser width, screen height, aspect ratio, etc.

Differently said, media queries allow you to optimize your site layout for all kinds of form factors.

Via http://mediaqueri.es/

@media screen and (min-width: 400px) { article { border: 5px solid hsla(32, 98%, 51%, 1); box-shadow: hsla(0, 100%, 0%, 0.5) 0 0 10px;

max-width: 800px; margin: 0 auto 0 auto; }

@media screen and (min-width: 400px) and (max-width: 800px) { article { /* css for browsers with width ≥ 400px and ≤ 800px */ }

@media screen and (min-width: 400px), not projection and (aspect-ratio: 16/9) { article { /* css for browsers with width ≥ 400px, except projectors with 16/9 aspect ratio */ }

@media screen and (max-width: 800px) { article { /* css for browsers with width ≤ 800px */ }

}@media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ }

@media screen and (max-width: 800px) { article { /* css for browsers with width ≤ 800px */ }

}@media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ }

Remember that mobile browsers have a default viewport width (e.g. 850px).For your mobile specific media queries to work, you need to set the viewport!

default viewport.mobile specific media queries not applied.

width=device-width. mobile specific media

queries applied.

The viewport and media queries combo allows you to create just one responsive site that works everywhere.

Q: What about max/min-device-width/height?

A: There are use cases for this, but note that your media queries won’t be applied when resizing the browser on desktop.

Q: Should I start from small to large, or vice versa?

A: Do mobile first, then enhance for desktop. This will make the mobile experience faster. Deal with old IE using a polyfill, such as Respond.js

https://github.com/scottjehl/Respond

Q: Which screen sizes should I design for?

A: All of them! No, seriously, don’t limit yourself. Resize your browser window and tweak different elements’ CSS properties when needed.

Dealing withhigh-DPI screens

A pixel is not what it seemsThus far, we’ve talked about pixels in terms of “CSS pixels”.One CSS pixel can be multiple device pixels.

HVGA portrait

Device is 480px wide, but browser applies default zoom of 150%.

480px/1.5 = 320px

In most scenarios, you won’t have to worry about this.It just works.

However, if you want to control DPI related stuff, these are the things you can do:

Use high resolution images to preserve crispiness.

Use the device-pixel-ratio media query to serve DPI-specific CSS.

I’ve set the 1500×1500px background-image to repeat every 1000px, making it crispy again. The rest of the content is still scaled 150%.

NB:-o-max/min-device-pixel-ratio uses fractions-webkit-max/min-device-pixel-ratio uses numbers

Set the meta viewport’s target-densitydpi property to device-dpi.

Everything is shown at 100%. One CSS pixel is equal to one device pixel.

NB:There are other target-densitydpi values, such as high-dpi, medium-dpi, low-dpi, as well as actual DPI numbers, but don’t bother with them. Just use device-dpi, and then only if really needed.

@viewportCSS Device Adaptation ED

Why doing all this viewport stuff with <meta> tags? Isn’t this something for CSS?

becomes

@viewport {width: device-width;zoom: 1;user-zoom: fixed;

becomes

@-o-viewport {width: device-width;zoom: 1;user-zoom: fixed;

@-o-viewport { width: device-width;}@media screen and (max-device-width: 480px) { @-o-viewport {

width: 480px; }}

@-o-viewport { width: device-width;}@media screen and (max-device-width: 480px) { @-o-viewport {

width: 480px; }}

Crazy stuff

Phew, that was all!Thanks for listening :-)

@andreasbovens

Thanks to ~yc for the wooden background: http://yc.deviantart.com/art/Wood-Rays-62468397

Optimizing your layout for phones and tablets using viewport and media queries

Technology

Web Technology lecure slides - vanslooten.com · 2019. 9. 23. · Set the Viewport Responsive layout Responsive images Use media queries Design: Mobile First! WE CREATE IDENTITY 9/23/2019

A Multi-FoV Viewport-based Visual Saliency Model Using

Augmented Viewport: Towards precise manipulation at …wearables.unisa.edu.au/wp-content/uploads/2016/07/Augmented... · 1 Augmented Viewport: Towards precise manipulation at a distance

Augmented Viewport: Towards precise manipulation at a ......1 Augmented Viewport: Towards precise manipulation at a distance for outdoor augmented reality wearable computers Thuong

Two Dimensional Viewingegspselva.weebly.com/uploads/2/2/0/3/22030800/2d_viewing.pdf · Viewport window-to-viewport transformation. The Viewin g Pipeline 1. Construct the scene in

2.3 WINDOW-TO-VIEWPORT COORDINATE TRANSFORMATION …mcasjcet.weebly.com/uploads/4/4/7/9/4479347/computer_graphics... · 2.3 WINDOW-TO-VIEWPORT COORDINATE TRANSFORMATION ... 301 COMPUTER

Analyzing Viewport Prediction Under Different VR Interactionsfengqian/paper/vr_conext19.pdfhighly challenging due to the “randomness” of viewport movement. Note that viewport adaptation

Chapter 23- UV Texture Mapping - Central Dauphin … will give you one 3D viewport and one UV Editor viewport. At the bottom of the UV Editor viewport, hit the Image-Open Image menu

Idiot's Guide to viewport and pixel

VIEWPORT MATRIX CLIPPING UNDERSTANDING Z CLIPPING THE RENDERING PIPELINE CLIPPING …tmm/courses/314-16/slides/raster... · 2016-02-12 · Per-vertex attributes Clipping Viewport

Death, Taxes & Viewport Chrome: Designing for Uncertainty

Adapt! Media queries and viewport

PaperFold: Evaluating Shape Changes for Viewport Transformations · PDF filePaperFold: Evaluating Shape Changes for Viewport Transformations in Foldable Thin-Film Display Devices Antonio

1 Computer Graphics 2 – Dimensional Viewing. 2 Clipping Window Viewport Viewport Coordinates The clipping window is mapped into a viewport. Viewing world

Viewport in Kerkythea

2D Coordinate Systems and Drawing. Coordinate Systems Screen coordinate system World coordinate system World window Viewport Window to viewport mapping

Mapeamento Window-Viewport Claudio Esperança Paulo Roma Cavalcanti

(TSH) • GS npc.drug@sfda.gov.sa § ... filePackage leaflet: Information for the patient Tablets Tablets Tablets Tablets Tablets Tablets Tablets Tablets Dosage For the treatment of

Software Design & Muster: OOP & FP · // Virtual viewport (floating point, "vector graphics") double viewTop,viewLeft; // top left corner of virtual viewport double viewWidth,viewHeight;

Viewport Proposal CNN for 360deg Video Quality Assessmentopenaccess.thecvf.com/content_CVPR_2019/papers/Li_Viewport_Pro… · Viewport Proposal CNN for 360° Video Quality Assessment