スマホサイトでrotate();を使いたい。
スマホサイトで、下記の様に背景をposition:fixedを使い固定させて表示しているのですが、
-webkit-transform: rotate(); が使えない、というところでつまずいています。
viewportの user-scalable=no を user-scalable=yes にすると、
rotate(); は使えるのは分かったのですが、position:fixedが使えなくなります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div style="position:fixed;top:0;">
<p class="img01"><img src="images/dammy.jpg" id="img01"style="position:fixed; top:0; -webkit-transform: rotate(10deg);" /></p>
</div>
</body>
</html>
苦肉の策で、下記の様に書いてみましたがダメでした。。
<script>
if (navigator.userAgent.indexOf('iPhone') > 1 || navigator.userAgent.indexOf('Android') > 1 || navigator.userAgent.indexOf('iPod') > 1 ) {
document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /><meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes" /></head><body><p class="img01"><img src="images/dammy.jpg" id="img01" /></p></body></html>');
}else{
document.write('<p class="img01"><img src="images/dammy.jpg" id="img01" /></p>');
}
</script>
どなたか良い方法があればご教授頂けると大変助かります。
よろしくお願いします。
お礼
お返事が遅れまして失礼しました。 大変参考になりました。 ありがとうございました。