ホームページの頭の記述方法によるスマートフォン表示の変化
- ホームページの頭の記述方法によるスマートフォン表示の変化について説明します。以前の記述方法ではスマートフォンで正常に表示されていたホームページが倍のサイズで表示され、ピンチ操作で縮小できなくなる問題が発生しました。
- 解決策として、新しい記述方法を使用し、<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">と書く必要があります。この方法により、ユーザーはホームページを開いたときに縮小された表示を見ることができます。
- ベストアンサー
ホームページの頭の記述
<!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"> に変えると、表示をピンチで縮小できる事が分かったのですが、 最初から縮小した表示を出したい場合、 何と書けば良いでしょうか？
- orange-house
- お礼率100% (948/948)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
initial-scale=1 の数値を変更してみて下さい。
関連するQ&A
- 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
- 表示がされません。
なぜでしょうか。 <pre> <code> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タイトル</title> <meta name="description" content="練習サイトそのいち"> <link rel="icon" type="image/x-icon" href="img/favicon.ico"> <meta name="viewport" content="width=device-width, initial-scale=1"> </code> </pre>
- 締切済み
- HTML
- <meta name="viewport" con
<meta name="viewport" content="width=device-width, initial-scale=1.0"> と言うタグ・ソースは 「サイトをスマホで表示させるためのタグ・ソース」 と覚えればいいのでしょうか?
- ベストアンサー
- HTML
- スマホサイトで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> どなたか良い方法があればご教授頂けると大変助かります。 よろしくお願いします。
- 締切済み
- HTML
- ジオシティーズ 横幅 広告のサイズになる
ジオシティーズでＨＰを作っているのですが <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no" /> を入れているのに、 スマホで表示するサイズが 広告のサイズより小さくなりません。 <div id="main"> にたしいて #main{ width: 200px; } としているのですが、添付画像の様になってしまいます。 広告に合わせて作るしかないのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- スマートフォンの画面サイズに合わせてページを表示
スマートフォンの画面サイズに合わせてページを表示させるために「viewport」 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 上記のタグを使用したのですが、iPhoneの場合は大丈夫なんですけれど、アンドロイドの場合、スクリーンサイズよりも大きく表示されてしまい困っています。 この「viewport」のタグを<head>～</head>内に入れるだけではダメなのでしょうか？ webでの検索で探し方が悪いのか「viewport」の紹介してあるページにしかたどりつけていません、こちら以外の方法もあるのでしょうか？ もし解決方法をご存知の方がいましたら解答お願いします。
- ベストアンサー
- その他（プログラミング・開発）
- スマートフォンの画像サイズ
スマートフォンのデザインを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
- blogger iframe doctype変更
html編集まだ初心者レベルです。アドバイスお願いいたします。 bloggerのページ内にて、iframeタグやscriptタグを使用したいのですが、貼り付けても反映させることが出来ません。 CSSのhtml編集が必要なのでしょうか？ 調べていると、DOCTYPE宣言をTransitionalに変更するとよいというような記述を見ました。 どこを編集すればよいかご存知であれば、ご教授お願いいたします。 （以下、引用） <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title>
- ベストアンサー
- ブログ
- 画像の表示をリキッドにする方法
android端末向けのHPを作成しています。 viewport を以下のように書きリキッドレイアウトで作成しているのですが、img srcで貼っている画像のサイズが変わらず横のスクロールバーがでてしまいます。 画面サイズに変更するにはどうすれば良いでしょうか？（BG指定でしか画像のサイズは変わらない？） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
- ベストアンサー
- HTML
お礼
値を、0.4 にしたところ、キッチリ表示されるようになりました。 教えてくださり、どうもありがとうございました。 助かりました。