Tag Archives: Safari

HTML, iPhone

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

Leave a comment

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?

Advertisement
CSS, CSS3

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

3 Comments

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 →

CSS, CSS3

CSS3 – Text Rotation by 3D Transforms

1 Comment

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

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

3 Comments

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 →