HTML and CSS Reference
In-Depth Information
rotate a device, the browser adjusts the text size. If for some reason you'd like to prevent this effect, use the following
CSS rule:
<style>
.maintainSize {
-webkit-text-size-adjust: none;
}
</style>
■
text-size-adjust
is a Webkit-only CSS property that allows you to control text adjustment.
Note
If you're a publisher, you'll often want to create a web app experience for your mobile visitors. If you're in charge
of building the content that ads will run on and want to have a handy script in your arsenal for hiding the default
toolbar of a mobile web page, check out the following code snippet, which can attach to the DOM load event:
<script>
window.addEventListener('load', function() {
setTimeout(scrollTo (0, 1));
}, false);
</script>
Also, since we're talking about mobile, it's pretty safe to say you live in a touch world. While this is amazingly
great for the UI, it does pose some challenges for creating traditional behaviors where users are accustomed to mouse
input. One of these challenges is creating a “hover” effect, and while it's technically impossible to do, you can still
have buttons in your UI respond as if they were actually being clicked. The following JavaScript example can help you
mimic this effect, which can be very useful for certain design interactions:
<script>
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener('touchstart', function () {
this.className = "hover";
}, false);
myLinks[i].addEventListener('touchend', function (){
this.className = "";
}, false);
}
</script>
As you can see, you grab all the
a
tags and add a class of
hover
on
touchstart
and
touchend
events. Now once
you've added the JavaScript to your document, you can style as you normally would in CSS using the
hover
class.
The last mobile code snippet relates to touch events again. Often you will notice that when you are interacting
with a touch-enabled object in your DOM, the entire browser window moves and not the object you're targeting.
