Safari 9.1 | Responsive Web Design

Safari 9.1

Safari is catching up with the times now and are dropping the <picture> element into the browser. They’ve also documented and rolling out the layout issue caused by iPhone 6 by including ‘shrink-to-fit=no’ to your meta viewport declaration (I believe this was caused by elements that were larger
than the viewport and set to overflow). The FT LabsFastClick
will not be needed any more with a fast-tap response being added to anything with

width=device-width

or

user-scalable=no

(which you should never use btw).

You can use the HTML

picture

element to provide Safari with multiple versions of the image for different browser configurations and viewport sizes. Safari evaluates the picture’s image resources in the order in which they are provided. Safari displays the first image resource with
media

attributes that conform to the browser’s user agent and device specifications. Include an


img

element, like the one shown in Listing 1, as fallback for browsers without

picture

element support. For more information, see

http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-picture-element

An excerpt from Safari 9.1

View original article

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.