Tag Archives: Safari

HTML – Disable auto scaling on iPhone Safari when switching from portrait to landscape

For iPhone users, when you are viewing a website on Safari and switch the screen orientation from portrait to landscape, you will find that the content of the page will be scaled automatically to fit the screen width. This maybe a nice feature but probably not good for responsive design.

To disable the auto scaling, you can add the following meta on your HTML inside the <head> tag.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0" />

 

A drawback is the above meta will disable the user scaling as well. For more information, please refer to the reference link below.

Done =)

Reference: StackOverflow – How can I disable MobileSafari’s content scalling on orientation change?

CSS3 – Text highlight background color

If you want to change the text highlight color, you can apply the folowing CSS3 style.

::selection {
  background: #FF0000; /* Safari, Chrome */
}
::-moz-selection {
  background: #FF0000; /* Firefox */
}

 

Done =)

Reference: CSS-TRICKS – Overriding The Default Text Selection Color With CSS

CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

Text rotation can be done by CSS3 3D Transforms. But after the transform the text is aliased. For WebKit browser, the anti-aliasing feature could be enabled by adding the following CSS style.

  * {
    -webkit-transform: translate3d(0,0,0);
  }

Continue reading CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

CSS3 – Text Rotation by 3D Transforms

Next: CSS3 – Smooth the text in WebKit browser after Text Rotation by activating the anti-aliasing

We can rotate text by using the CSS3 transform.

To rotate a text in clockwise direction with 45 degree:

p {
  -webkit-transform: rotate(45deg); /* Safari and Chrome */
  -moz-transform: rotate(45deg);    /* Firefox */
  -ms-transform: rotate(45deg);     /* IE 9 */
  -o-transform: rotate(45deg);      /* Opera */
  transform:rotate(7deg);
}

 
Continue reading CSS3 – Text Rotation by 3D Transforms

HTML5 – Play sound/music with <audio> tag @ 1

Next: HTML5 – Play sound/music with <audio> tag @ 2

With HTML5, we can easily play audio file with the <audio> tag. Here is an example.

<html>
  <head></head>
  <body>
    <audio controls loop autoplay>
      <source src="music.ogg" type="audio/ogg" />
      <source src="music.mp3" type="audio/mp3" />
      Your browser does not support the audio element.
    </audio> 
  </body>
</html>

Continue reading HTML5 – Play sound/music with <audio> tag @ 1