ベストアンサー

<meta name="viewport" con

2016/08/25 23:31

ZDDCBRLVEO
お礼率95% (137/144)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

t_ohta
ベストアンサー率38% (5238/13705)

2016/08/26 09:25 回答No.1

基本的には「スマホで表示する際の表示サイズ」を指定するタグです。 viewport の機能を持つブラウザであればスマホ以外でも適用されますので、厳密にはスマホ限定ではありません。

質問者

お礼 2016/09/03 09:43

ご回答ありがとうございました。

関連するQ&A

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0"> と <meta name="viewport" content="width=device-width, initial-scale=1" /> は意味は同じですか？違いは 1.0か1かと最後にスラッシュがあるかです。
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タグを適用させない方法はありますでしょうか？何か良い方法がありましたら、教えていただけますと嬉しいです。どうぞ宜しくお願いします。
ホームページの頭の記述

<!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"> に変えると、表示をピンチで縮小できる事が分かったのですが、最初から縮小した表示を出したい場合、何と書けば良いでしょうか？
ジオシティーズ　横幅　広告のサイズになる

ジオシティーズでＨＰを作っているのですが <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="format-detection" content="telephone=no" /> を入れているのに、スマホで表示するサイズが広告のサイズより小さくなりません。 <div id="main"> にたしいて #main{ width: 200px; } としているのですが、添付画像の様になってしまいます。広告に合わせて作るしかないのでしょうか？
テーブル固定幅のサイトをスマホ対応させるには？

PC用ページ(テーブル固定幅のデザイン)を作ったのですが、スマホで見ると、画面に収まっておらず横スクロールをしないと画面上に収まりません。 viewportのmetaタグをhead内に記述しても何も変わりませんでした。テーブルの幅はwidth="515" タグは<meta name="viewport" content="width=515px"> <meta name="viewport" content="width=device-width"> それぞれhead内に記述してみましたが、全く反映しません(515pxの数値を変えても無理) 何が間違っているのでしょうか？？どうすれば、スマホで画面に収まるようにできますか？
タグを入れてるのにスマホ用サイズで表示されない

スマホならスマホ用サイズで表示されるように、 <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">" のようにして、読み込むように変更しました。これが原因なのでしょうか？
スマートフォンの画面サイズに合わせてページを表示

スマートフォンの画面サイズに合わせてページを表示させるために「viewport」 <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> 上記のタグを使用したのですが、iPhoneの場合は大丈夫なんですけれど、アンドロイドの場合、スクリーンサイズよりも大きく表示されてしまい困っています。この「viewport」のタグを<head>～</head>内に入れるだけではダメなのでしょうか？　 webでの検索で探し方が悪いのか「viewport」の紹介してあるページにしかたどりつけていません、こちら以外の方法もあるのでしょうか？もし解決方法をご存知の方がいましたら解答お願いします。
表示がされません。

なぜでしょうか。 <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>
画像の表示をリキッドにする方法

android端末向けのHPを作成しています。 viewport を以下のように書きリキッドレイアウトで作成しているのですが、img srcで貼っている画像のサイズが変わらず横のスクロールバーがでてしまいます。画面サイズに変更するにはどうすれば良いでしょうか？（BG指定でしか画像のサイズは変わらない？） <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta itemprop=

とあるサイトのソースなのですが <meta name="description" content="○○についてまとめたサイトです。" /> <meta itemprop="description" content="○○についてまとめたサイトです。" /> となっているのですが、 <meta name="description"は私もよく使うし見かけるタグなのですが <meta itemprop= はどういう意味なのでしょうか？
スマートフォンの画像サイズ

スマートフォンのデザインを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 で作成した画像を切り出して、自動的に縮小されるようにする方法があるのでしょうか？いろいろ調べたのですが、よくわからず（調べ方も分からず…）困っています。無知で申し訳ないのですが、よろしくお願いいたします。
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>
meta name="verify-v1" について

<meta name="verify-v1" content="UMcCrJ8ZwXZVHiBe6KzqaEhmzg3SZw="> このmetaタグのコンテンツ部分はサイトのことですが、自分のサイトのこの文字列はどうやったらわかるのでしょうか？GOOGLEのサイトにそのようなところありますか？
wp_is_mobileの書き方について

ワードプレスで構築したサイトで、PC（モバイル以外）からのアクセス時のみ、ページ全体の表示倍率を75%にしたいと考えています。そこで、以下のようにwp_is_mobileの機能をfunctions.phpに追記したのですが、 syntaxエラーが起き、原因として、上記のwp_is_mobileの行に問題があると表示されました。 <?php if( wp_is_mobile() ) { // } else { // <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=0.75, maximum-scale=1" /> } ?> おそらく書き方に問題があるとお思うのですが… どなたかご指摘をいただけませんでしょうか？よろしくお願いいたします
文字化けを解決したい

サイトを持つ管理人です。タグなどについてはかなり初心者です。 iPhoneなどの海外OSから閲覧すると文字化けしてしまうという報告を受けて、タグを色々いじっています。 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">を追加してみたのですが、これ単品だと私のPCから閲覧したときに文字化けしてしまいました。そのため<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">と<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">を並べてみたのですが、これで海外OSからも文字化けを起こさなくなったのでしょうか？こんな感じのタグです↓ <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW,NOARCHIVE"> <META NAME="ROBOTS" CONTENT="NOARCHIVE,NOINDEX,NOFOLLOW"> <meta name="viewport" content="width=380, maximum-scale=1.6" /> <title>練習</title> </head> 全てのスマホからもサイトを閲覧出来るようにするにはどうしたら良いでしょうか？それとも、全てのスマホから文字化けを防ぐことは不可能なのでしょうか？お知恵をお貸しください。
METAタグについて教えて下さい

ホームページのMETA情報のところに、通常のページのtitleとは別に、 <meta name="pagetitle" content="*******という記述があるホームページを見かけたのですが、このタグにはどのような意味があるのでしょうか？また、通常のtitleとは別に、記述をした方がSEO対策上効果的なのでしょうか？上記のページ内のソースには、 <meta name="keywords" contentと、 <meta name="description" contentはちゃんと入っていて、これら以外にmeta name="pagetitle" content のタグがあったのです。ちなみに上の****の部分には、キーワードのような単語が並んでいました。是非、宜しくお願い致します。
スマホから見た時の文字位置

カテゴリ間違いにてもう一度すみません前にも質問をさせて頂きましたが未だに解決に及ばないのでもう一度聞かせて下さい。 PCから見ると添付した画像の様にイラストの真下にリンクが来てくれるのですが、スマホから見ると添付した画像の様にずれて表示されてしまいます <meta name="viewport" content="width=device-width"> を打ち込むと良いと言うコメントを頂いて metaの所にプラスしてみましたが変わりは無く・・・この他に何かするべき点は御座いますでしょうか？宜しくお願い致します。
スマホとPCの表示をクリックで切り替える方法

初心者でスマホ対応に困っております。同一ページ（ワンソース）で対応できるようにしようと javascriptのuserAgent（※以下参照）でPC用とスマホ用の表示CSSが切り替わるページを作成しています。スマホサイトのフッターによくある「PC」へのリンクをクリックするとスマートフォンでもPC用のスタイルが適用されるようにしたいと思っております。また、PC用CSSからスマホ用CSSへ戻るリンクも設置したいと思っております。環境は「.htaccess」と「php」が利用できないサーバです。できればウィンドウサイズで表示が切り替わるのではなく、リンクをクリックするだけで PC用とスマホ用のCSSを切り替えたいと思っております。色々と探してみたのですが、なかなか思うソースが見つからなかったので、実現可能かどうかも踏まえてご教授いただけますと幸いです。以下、こんな感じでCSSを切り替えております。 if (navigator.userAgent.indexOf('iPhone') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); } else if (navigator.userAgent.indexOf('iPad') != -1) { document.write('<link rel="stylesheet" href="css/iPad.css" />'); } else if (navigator.userAgent.indexOf('Android') != -1) { document.write('<meta name="viewport" content="width=device-width, maximum-scale=1.0" />'); document.write('<link rel="stylesheet" href="css/smp.css" media="only screen and (max-device-width: 480px)" />'); }; どうぞよろしくお願い申し上げます。
METAタグのNAME、CONTENT属性のさまざまな値について

HTMLで難解なMETAタグですが、NAME、CONTENT属性にさまざな値を下記のように代入できるようなんですが、その有用性がわかりません。例）1.作者名を宣言　　　　 META NAME="author"　CONTENT="作者名や会社名など" 　　　2.タイトルを宣言　　　　　META NAME="title"　CONTENT="タイトル名" 　　　　3.HTML文書を作成したソフト名の宣言　　　　　META NAME="GENERATOR"　CONTENT="ソフト名" 　　　　4.問い合わせ先のメールアドレス　　　　　META NAME="REPLY-TO"　CONTENT="メールアドレス" 　　5.ドキュメントの制作日や、制作時間を宣言　　　　　META NAME="BUILD"　CONTENT="02.4.1(作成年月日)" 　　などです。 1.と4.などは、本文中にブラウザ上で表示しますし、2.はTITLEタグで通常指定しています。 1.～5.全てに言えることですが、特に記述する必要を感じませんし、仮に記述したとして、何かメリットがあるのでしょうか？ご存知の方がおられましたら、ぜひ教えてください<m(__)m>
スマホサイトで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> どなたか良い方法があればご教授頂けると大変助かります。よろしくお願いします。

<meta name="viewport" con

質問者が選んだベストアンサー

お礼 2016/09/03 09:43

関連するQ&A

viewport

body内にmetaタグを記述は問題ありますか？

ホームページの頭の記述

ジオシティーズ　横幅　広告のサイズになる

テーブル固定幅のサイトをスマホ対応させるには？

タグを入れてるのにスマホ用サイズで表示されない

スマートフォンの画面サイズに合わせてページを表示

表示がされません。

画像の表示をリキッドにする方法

<meta itemprop=

スマートフォンの画像サイズ

blogger iframe doctype変更

meta name="verify-v1" について

wp_is_mobileの書き方について

文字化けを解決したい

METAタグについて教えて下さい

スマホから見た時の文字位置

スマホとPCの表示をクリックで切り替える方法

METAタグのNAME、CONTENT属性のさまざまな値について

スマホサイトでrotate();を使いたい。

注目のQ&A

カテゴリ
一覧

専門家に質問してみよう
専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

<meta name="viewport" con

質問者が選んだベストアンサー

お礼 2016/09/03 09:43

関連するQ&A

viewport

body内にmetaタグを記述は問題ありますか？

ホームページの頭の記述

ジオシティーズ 横幅 広告のサイズになる

テーブル固定幅のサイトをスマホ対応させるには？

タグを入れてるのにスマホ用サイズで表示されない

スマートフォンの画面サイズに合わせてページを表示

表示がされません。

画像の表示をリキッドにする方法

<meta itemprop=

スマートフォンの画像サイズ

blogger iframe doctype変更

meta name="verify-v1" について

wp_is_mobileの書き方について

文字化けを解決したい

METAタグについて教えて下さい

スマホから見た時の文字位置

スマホとPCの表示をクリックで切り替える方法

METAタグのNAME、CONTENT属性のさまざまな値について

スマホサイトでrotate();を使いたい。

注目のQ&A

カテゴリ 一覧

専門家に質問してみよう 専門家登録

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

ジオシティーズ　横幅　広告のサイズになる

カテゴリ
一覧

専門家に質問してみよう
専門家登録