webqs - Tumblr blog

webqs · 11 years ago

Text

Detecting device orientation changes in web pages

Q: How can I detect device orientation changes in a web page?

A: You can detect whether a device is being held in portrait or landscape orientation with CSS media queries. And, since these queries are re-evaluated when the device orientation changes, you can also use them to dynamically change the page's CSS when a device is rotated.

In addition Safari on iOS emits the orientationchange event when the device orientation changes, and supplies window.orientation to report the current device orientation.

Let's start by looking at a simple example of CSS media queries in action. If the user is holding their device in portrait orientation, the box on this web page will be purple when the page is loaded and change color to green when the device is rotated to landscape:

#box { background-color: purple; } @media all and (orientation: landscape) { #box { background-color: green; } }

You can even animate this color change, so that it happens gradually over time, instead of instantaneously:

/* Mind your prefixes! For example, this would be -webkit-transition in a WebKit-based browser */ transition: background-color 500ms ease-in;

If you have CSS styles that are specific to portrait orientation, there's a query for that too:

@media all and (orienation: portrait) { /* your portrait-specific CSS here */ }

The code snippet above is just simple example that changes background-color on an element, but you can imagine how useful these media queries are if you're trying to create a layout that looks great in both portrait and landscape orientations. You could even combine orientation and device-width expressions, in order to tailor your layouts to specific orientations on specific screen sizes.

As mentioned, Safari on iOS emits the orientationchange event when the device orientation changes, plus you can query window.orientation to determine the current orientation of a device. For example:

<body onorientationchange="updateNote();"> ... function updateNote() { var note = ""; switch(window.orientation) { case 0: note = "Portrait"; break; case -90: note = "Landscape Right\n(screen turned clockwise)"; break; case 90: note = "Landscape Left\n(screen turned counterclockwise)"; break; case 180: note = "Portrait Upside-down "; break; } var message = document.querySelector('#note').innerText = note; }

Note that not all devices support portrait upside-down. Try out this example on your iPhone or iPad to see all of the above code in action. Enjoy!

Disclaimer: I've only tested on iPhone and iPad, as I don't own an Android device!

More info:

MDN guide to CSS media queries

For more detailed information about a device's orientation and movement, check out the deviceOrientation and deviceMotion APIs (also documented on MDN).

// <![CDATA[ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); // ]]>

#responsive design #safari #mobilesafari #css #media queries

1 note · View note

webqs · 11 years ago

Text

Saving CSS and JavaScript changes made in the Safari Web Inspector

Q: I just made a bunch of changes to my CSS and JavaScript in the Safari Web Inspector. Is there any way to save them?

A: Yes!

You're probably tweaking your CSS values in the right sidebar of the Web Inspector, under the Rules pane. The DOM Tree view is likely showing in the center panel, like so:

After you've changed a style, click on the name of your CSS file in the Resources list on the left, or click on this file name next to the CSS style you were just editing:

This will switch the center panel from the DOM Tree to the Source Editor view. The changes you have previously made under the Rules panel in the right sidebar will be reflected in the source view. Here's what I see while making changes to the subtitle color and background color:

Then after I click the CSS file name, I see those changes reflected in the Source Editor view:

Press cmd-s to save. A Save panel will come up, and it will ask you if you want to replace the CSS file that's already there. You do!

From this point on you can press cmd-s and the changes will be saved silently, without the Save panel prompt. If you open a new window and begin inspecting, changing, and saving again, you'll get that initial Save panel prompt again.

The same thing works for JavaScript changes. Switch the center panel to the Source Editor view by clicking on a JavaScript file name, make changes to your source code, then press cmd-s to save.

Here's a set of files to test with, if you'd like to try this out.

Bonus: Keep your CSS or JS file open in a text editor that live updates changes from disk, while working and saving in the Web Inspector. That way, if you save in the Web Inspector but realize you made a mistake, you can switch to your text editor and Undo (press cmd-z) to easily get back to the previous state.

#mobilesafari #mobilesafari webdev #webinspector #css #javascript #debugging

0 notes

webqs · 11 years ago

Text

Debugging web pages in Safari on iOS

Q: Can I debug a web page in Safari on iOS? Not in an emulator, on my actual device?

A: Yes! You can use the Web Inspector in Safari on OS X to debug a web page that's loaded in Safari on your iPhone or iPad.

First, you have to enable the Web Inspector on your iOS device. Navigate to Settings -> Safari -> Advanced (all the way at the bottom), then toggle the switch for Web Inspector to ON.

Just as the Advanced panel above says, connect your iOS device to your OS X machine with a cable. Load a web page in Safari on iOS, then open the Develop menu in Safari on OS X (if you don't see this menu, enable it in Safari Preferences -> Advanced -> Show Develop menu in menu bar).

In the Develop menu, you should see the name of your device, plus any inspectable URLs (usually the frontmost "tab" in Safari on iOS, at least).

Select a URL from the list. When you hover over a list item, the page that corresponds to the URL you're selecting will be highlighted with a blue overlay on your iOS device (below, left). When you click a URL in the list, a Web Inspector window will open on OS X (below, right).

From this point on you can inspect, debug, profile, etc your web page on iOS as you typically would, using the Web Inspector window that is open on OS X.

Note that as soon as the Web Inspector window opens, the blue overlay that covers the entire page will disappear. Now, an overlay will be shown over whatever web page element you're inspecting. You can easily select an element to inspect — first click the Inspect crosshairs in the Web Inspector on OS X, then tap an element in the web page on your iPad or iPhone.

For example, here I clicked the Inspect crosshairs (above), then tapped the title "CSS Transforms" in the web page on my iPhone. The Web Inspector on OS X has automatically selected and revealed that element in the DOM Tree view.

Happy debugging! 😊💃

More info:

Safari Web Inspector Guide

#mobilesafari #mobilesafari webdev #webdev #web #debugging #css #javascript #safari

0 notes

webqs · 11 years ago

Text

Detecting support for touch events

Q: How can I determine whether the current browser supports touch events?

A: Don't look at the user agent string for a certain browser name or version. Instead, use JavaScript to test for the existence of the createTouch property on the document object.

if ("createTouch" in document) { // touch events are supported }

I often like to test for touch events support, then set event handlers accordingly. This lets me develop new code on the Desktop, and still get the immediate feedback and responsiveness that touch events provide on iOS devices.

For example:

function init() { var down = "mousedown"; var up = "mouseup"; if ('createTouch' in document) { down = "touchstart"; up = "touchend"; } var myElement = document.querySelector("#myElement"); myElement.addEventListener(down,doSomething,false); myElement.addEventListener(up,doSomething,false); }

This easy test for touch events is also handy for simply getting the wording in your UI correct. For instance, the full example says "Tap" instead of "Click" if touch events are supported.

Be sure to try out the full example in your Desktop browser, and in Safari on iOS.

More info:

The W3C spec for Touch Events

Handling Multi-touch events and gestures, in the Safari Web Content Guide

An oldie but goodie from WWDC 2010: Session 508: Adding Touch and Gesture Detection to Web Pages

Disclaimer: I don't own any Android devices, so I've only tested this on iOS on iPhone and iPad!

#mobilesafari #webdev #web development #javascript #touchevent

1 note · View note

webqs · 11 years ago

Text

Smooth scrolling for overflow:scroll elements, in Safari on iOS

Q: In Safari on OS X, I can "flick" within an overflow:scroll element and the text scrolls beautifully. In Safari on iOS, the text only scrolls when my finger is in direct contact with the screen. Is there any way to get the OS X smooth scrolling behavior in Safari on iOS?

A: Sure! You can enable native-style smooth scrolling for an overflow:scroll element in Safari on iOS by setting -webkit-overflow-scrolling to touch.

#mylifestory { height: 200px; width: 300px; overflow: scroll; -webkit-overflow-scrolling: touch; } ... <div id="mylifestory"></div>

Try it out here (on your iPhone or iPad).

#css #css3 #css animations #safari #mobilesafari #webdev #web #web development

1 note · View note