- 締切済み
スマホサイトで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> どなたか良い方法があればご教授頂けると大変助かります。 よろしくお願いします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- metametamu
- ベストアンサー率51% (153/295)
関連するQ&A
- ホームページの頭の記述
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> という書き方を消して、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UFT-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> と書いたところ、 今までスマートフォンにきっちり表示されいたホームページが、 急に倍のサイズに表示され、ピンチしても縮小されません。 いろいろやってみたところ、 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0"> の一行を <meta name="viewport" content="width=device-width,initial-scale=1"> に変えると、表示をピンチで縮小できる事が分かったのですが、 最初から縮小した表示を出したい場合、 何と書けば良いでしょうか？
- ベストアンサー
- HTML
- 画像の表示をリキッドにする方法
android端末向けのHPを作成しています。 viewport を以下のように書きリキッドレイアウトで作成しているのですが、img srcで貼っている画像のサイズが変わらず横のスクロールバーがでてしまいます。 画面サイズに変更するにはどうすれば良いでしょうか？（BG指定でしか画像のサイズは変わらない？） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
- ベストアンサー
- HTML
- テーブル固定幅のサイトをスマホ対応させるには？
PC用ページ(テーブル固定幅のデザイン)を作ったのですが、 スマホで見ると、画面に収まっておらず横スクロールをしないと画面上に収まりません。 viewportのmetaタグをhead内に記述しても何も変わりませんでした。 テーブルの幅はwidth="515" タグは<meta name="viewport" content="width=515px"> <meta name="viewport" content="width=device-width"> それぞれhead内に記述してみましたが、全く反映しません(515pxの数値を変えても無理) 何が間違っているのでしょうか？？ どうすれば、スマホで画面に収まるようにできますか？
- ベストアンサー
- HTML
- ホームページの上下の隙間を消すには
左右にだけ背景があるよくあるページを作ろうと一から自分で作り始めたのですが色々いじってもなぜかどうしても上下に隙間ができてしまいます。 上下がぴったりつく方法を教えて下さい。 ------------------------------------------------------------------------- <!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=shift_jis" /> <title>無題ドキュメント</title> <html> <style type="text/css"> <!-- #main { width: 800px; margin-right: auto; margin-left: auto; background-color: #FFFFFF; } body { margin:0px; padding:0px; background-color: #999999; } --> </style> </head> <body> <div id="main"> <p><img src="images/head_01.gif" width="800" height="1000" /></p> </div> </body> </html>
- ベストアンサー
- ブログ
- IE6でのexpressionを使用した要素固定対
--- <!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=UTF-8" /> <title>タイトル</title> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> body{background:#ffffff url(null) fixed;} #fixed{position:absolute;top:expression(eval(document.documentElement.scrollTop+0));background:#ccc;} #fixed{width:100%;height:100px;} </style> </head> <body> <div id="fixed" class="specify"></div> <div id="contents" style="padding:100px 0px 1000px;"> <select> <option selected="selected" value="">選択してください</option> </select> </div> </body> </html> --- 余計な部分を省いていますが 上記の内容でIE6用にページ上部に常に表示されるナビを表示しています。 そうすると、スクロールする要素内にあるselectが DIV#fixedの上に乗っかってしまいます。 このバグを解決する方法をご存じの方、いらっしゃいますでしょうか？ 今更IE6ですいません。 かなり悩んだのですが解決策が見あたらず参っています。
- ベストアンサー
- HTML
- body内にmetaタグを記述は問題ありますか？
宜しくお願い致します。 某ネットショップASPを使用してECサイトの構築を行っているのですが、 注文手続きの画面はほぼカスタマイズ不可です。 この注文手続きのページでは metaタグが下記の内容に設定されています。 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0"> この記述を下記のように変更したいです。 <meta name="viewport" content="width=device-980, user-scalable=yes, initial-scale=1.0, maximum-scale=1.6,minimum-scale=0.25"> ですが、メタタグの変更は出来ない仕様のため、 body内に希望のmetaタグを記述してそちらを適用するようにできればと思っています。 そこで質問なのですが、 ●body内にmetaタグを記述するとスパム扱いあれたり、 seo面で問題などありますでしょうか？ （注文画面のため、このページが検索上位になる必要はないのですが、 他のページに影響があったら問題あります・・・。） ●body内にmetaタグを記述する方法以外に、 元々入っているmetaタグを適用させない方法はありますでしょうか？ 何か良い方法がありましたら、教えていただけますと嬉しいです。 どうぞ宜しくお願いします。
- 締切済み
- HTML
- タグを入れてるのにスマホ用サイズで表示されない
スマホならスマホ用サイズで表示されるように、 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" > を入れていて、今まで問題なく表示されていたのですが、 タグをいじったら、スマホでもＰＣサイズで表示されるようになってしまいました。 上記のコードはいじってないので、入れっぱなしです。 タグヲいくつか変更したので、どれが原因なのかわからないのですが、 今までは同じページ内にスタイルシートを書いてたのですが、 <link rel="stylesheet" type="text/css" href="http://Server/test.css">" のようにして、読み込むように変更しました。 これが原因なのでしょうか？
- 締切済み
- CSS
- スマートフォンの画像サイズ
スマートフォンのデザインを640pxで制作し、スマートフォンサイトを構築中です。 viewport の設定を <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> とし、画像を640pxで制作したサイズで切り出していますが スマートフォンで実機確認すると、縮小されず、倍のサイズで表示されてしまいます。 幅640pxで作成したデータを、半分に縮小したもの（320px）を画像として切り出すのが正しい方法なのか、それとも、切り出した画像の<img … width=" 半分のサイズ ">にするのでしょうか？ それとも、幅640px で作成した画像を切り出して、自動的に縮小されるようにする方法があるのでしょうか？ いろいろ調べたのですが、よくわからず（調べ方も分からず…）困っています。 無知で申し訳ないのですが、よろしくお願いいたします。
- 締切済み
- CSS
- IE6で表示がずれて困っています。
IE6で表示がずれて困っています。 firefox・IE８では表示されるのに、IE6ではずれてしまいます。 質問したい事が２つあるのですが、 １つ目は インラインフレームでIE６だけサイズが大きくなる。 原因とサイズの揃え方を教えて下さいm(__)m 画像添付とソースをはります。 <!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="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <link href="testcss.css" rel="stylesheet" type="text/css" /> </head> <body> <div> <p><img src="images/news.gif" width="490" height="29" /></p> <iframe src="news.html" id="newsi" frameborder="0" scrolling="auto"></iframe> </div> </body> </html> ●CSS● *{ margin: 0; padding: 0; } div{ width:490; height:200; } #newsi{ width: 486px; height: 150px; border: 2px #F96 solid; } --------------------------------------------------------- 一つ目は以上です。 二つ目もここにで質問したかったのですが、文字数が足りないためもう一度質問させていただきますm(__)m 初心者でわからない事が多いため、できるだけ詳しく教えて下さい。 宜しくお願いいたしますm(__)m
- ベストアンサー
- HTML
お礼
metametamuさん ご回答有難う御座います。 確認したところ、 上記サイトでは、スマホでスクロールが出来ないみたいです。 おそらくoverflow: auto;がスマホで対応出来ていないみたいですね。