タグ付けされた質問 「viewport」

ビューポートは、コンピュータグラフィックスの長方形の表示領域、または光学コンポーネントに使用される用語です。ビューポートは、表示される画像全体の一部を表示するために使用される画面の領域です。また、一緒に1つのレイアウトを作成する領域のグループにすることもできます。


15
Mobile Safariでビューポートのズームを無効にするにはどうすればよいですか?
私はこれら3つすべてを役に立たないように試みました: <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” /> <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” /> それぞれがGoogle検索またはSO検索で推奨されている異なる値ですが、「user-scalable = X」値のいずれも機能していないようです セミコロンの代わりに値をコンマで区切って試しましたが、うまくいきませんでした。それから私はuser-scalable価値があることだけを試しましたが、まだ運がありません。 更新 これをAppleのサイトから入手して動作します。 <meta name="viewport" content="width=device-width, user-scalable=no" /> 私はそれらを使用しているウェブサイトからメタタグをコピーしたので、問題は非標準的な引用であることがわかりました、おっと

9
Vimで垂直分割ウィンドウサイズを増やす方法
:vsplit(短縮形::vs)Vimビューポートを垂直に分割します。:30vsビューポートを分割し、新しいウィンドウを30文字幅にします。この30文字のウィンドウが作成されたら、サイズを31または29にどのように変更しますか? 水平ウィンドウありCtrl- W +行数を1つ増やします。列を1つ増やすための同等のコマンドは何ですか?
316 vim  window  viewport 

7
jQueryを使用してビューポートのサイズを取得する
jQueryを使用してブラウザービューポートのサイズを決定し、ページのサイズが変更された場合にこれを再検出するにはどうすればよいですか?このスペースにIFRAMEサイズを作成する必要があります(各マージンに少し入ります)。 知らない人のために、ブラウザのビューポートはドキュメント/ページのサイズではありません。スクロール前のウィンドウの表示サイズです。
308 jquery  resize  size  viewport 

30
向きが縦向きの場合、ビューポートの向きを検出しますユーザーに指示を通知する警告メッセージを表示します
モバイルデバイス専用のウェブサイトを構築しています。特に、横向きモードで表示するのに最適なページが1つあります。 そのページにアクセスしているユーザーがポートレートモードでページを表示しているかどうかを検出し、表示している場合は、ページがランドスケープモードで最適に表示されていることをユーザーに通知するメッセージを表示しますか?ユーザーがすでに横向きモードで表示している場合、メッセージは表示されません。 したがって、基本的には、サイトでビューポートの向きを検出し、向きがPortraitの場合、このページが横向きモードで最もよく表示されることをユーザーに通知する警告メッセージを表示します。

17
ビューポートズームiOS 10以降のサファリを無効にしますか?
私は私のiPhone 6を更新プラスiOSの10のベータ版にだけモバイルサファリでは、あなたがダブルタップで任意のウェブページをズームしたりピンチができることを発見したIGNOREuser-scalable=noメタタグ内のコードを。バグなのか機能なのかわかりません。機能と見なされる場合、ビューポートズームiOS 10サファリを無効にするにはどうすればよいですか? iOS 11/12リリースで更新されましたが、iOS 11およびiOS 12のサファリはメタタグを尊重しませんuser-scalable=no。

9
ReactJSでビューポート/ウィンドウの高さを取得する
ReactJSでビューポートの高さを取得するにはどうすればよいですか?私が使用する通常のJavaScriptでは window.innerHeight() しかし、ReactJSを使用すると、この情報を取得する方法がわかりません。私の理解は ReactDOM.findDomNode() 作成されたコンポーネントに対してのみ機能します。ただし、これはdocumentor body要素には当てはまりません。これにより、ウィンドウの高さがわかります。

7
HTML5キャンバス100%幅ビューポートの高さ?
ビューポートの幅と高さの100%を占めるキャンバス要素を作成しようとしています。 あなたは私の例で見ることができ、ここでしかし、それはChromeとFirefoxの両方にスクロールバーを追加して、発生しています。余分なスクロールバーを防ぎ、ウィンドウの幅と高さをキャンバスのサイズに正確に指定するにはどうすればよいですか?
151 jquery  html  canvas  viewport 


16
Overflow-x:hiddenは、モバイルブラウザーでのコンテンツのオーバーフローを防止しません
ここにウェブサイトがあります。 デスクトップブラウザで見ると、黒いメニューバーが正しく以来、唯一のウィンドウの端まで伸びbodyていますoverflow-x:hidden。 AndroidとiOSのどちらのモバイルブラウザーでも、黒いメニューバーは全幅で表示され、ページの右側に空白が表示されます。私の知る限り、この空白はタグhtmlやbodyタグの一部でもありません。 ビューポートを特定の幅に設定したとしても<head>: <meta name="viewport" content="width=1100, initial-scale=1"> サイトは1100pxまで拡大しますが、1100を超える空白があります。 何が欠けていますか?ビューポートを1100に保ち、オーバーフローを遮断するにはどうすればよいですか?

6
jqueryを使用してビューポートに対する要素の位置を取得する
(ドキュメントではなく)ビューポートを基準にしたページ上の要素の位置を取得する適切な方法は何ですか。jQuery.offset機能は有望であるように見えました: ドキュメントに対して、最初の要素の現在の座標を取得するか、一致する要素のセット内のすべての要素の座標を設定します。 しかし、それはドキュメントに関連しています。ビューポートに関連するオフセットを返す同等のメソッドはありますか?

4
ビューポートのサイズが変更されていない場合、jquery $(window).width()と$(window).height()は異なる値を返します
私は繰り返し呼び出すjqueryの使用してサイトを書いています$(window).width()し、$(window).height()ビューポートのサイズに基づいて、位置や大きさの要素にします。 トラブルシューティングで、ビューポートのサイズが変更されていないときに、上記のjquery関数を繰り返し呼び出すと、わずかに異なるビューポートサイズレポートが表示されることがわかりました。 これがいつ起こるか誰もが知っている特別なケースがあるのか​​、またはこれがまさにその通りであるのか疑問に思います。報告されているサイズの違いは20px以下であると表示されます。Mac OS X 10.6.2のSafari 4.0.4、Firefox 3.6.2、Chrome 5.0.342.7ベータで発生します。他のブラウザーはブラウザーに固有のものではないため、まだテストしていません。私はまた、違いが何に依存するかを理解することができませんでした。それがビューポートのサイズでない場合、結果を異なるものにする別の要因があるのでしょうか? どんな洞察もいただければ幸いです。 更新: これは、の値ではない$(window).width()と$(window).height()変化しています。上記の値を格納するために使用している変数の値です。 値に影響を与えるのはスクロールバーではなく、変数の値が変更されてもスクロールバーは表示されません。これが、変数に値を格納するためのコードです(これは、値を短くするためです)。 (これはすべて内にあります$(document).ready()) //最初に、他の関数から見えるように変数を宣言します .ready() var windowWidth = $(window).width(); //retrieve current window width var windowHeight = $(window).height(); //retrieve current window height var documentWidth = $(document).width(); //retrieve current document width var documentHeight = $(document).height(); //retrieve current document height var vScrollPosition …

3
モバイルサファリのオンザフライでビューポートメタタグを変更できますか?
さまざまなタイプのコンテンツを表示する必要があるモバイルSafariブラウザー用に構築されたAJAXアプリがあります。 一部のコンテンツには私が必要user-scalable=1、他のコンテンツには私が必要user-scalable=0です。 ページを更新せずにコンテンツ属性の値を変更する方法はありますか? <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

4
Google Maps APIの「meta viewport user-scalable = no」の意味は何ですか
私はGoogle Maps JavaScript API V3を使用しており、公式の例では常にこのメタタグを含めています。 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 私が見たほとんどのサードパーティの例でも同じことができます。けれども私はそれを使ってプラグインを書きました、そして、私のユーザーの1人は彼が彼のモバイルデバイスでズームインしたりズームアウトしたりすることを妨げていると私に言いました。テストに使用するモバイルデバイスがなく、検索で役立つ情報は見つかりませんでした。 では、タグの意味は何ですか?残しておいた方がいいですか?ブラウザエージェントを検出して、デスクトップブラウザでのみ表示する必要がありますか? あなたがプラグインを調べたい場合は、次のことができ、それをダウンロードし、ソースを閲覧したり、ライブの例を参照してください。

1
「initial-scale = 1.0」も設定されている場合にビューポートメタタグから「width = device-width」を削除することの副作用
一方で<meta name="viewport">、タグが標準化されていないですが、それは「原因事実上の支配にほとんどの携帯ブラウザで尊敬されています。」 真のWeb標準ではないことの欠点の1つは、詳細なドキュメントが他の標準ほど利用できないことです。CSSワーキンググループは、このための仕様を持っているので、それは私が主に権威の作品として使用していますものです。 私の主な質問は: 次の宣言の違いは何でしょうか? <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="initial-scale=1.0"> あるいは、これらの2つの@viewport CSS at-rules の違いは何ですか? /* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: 100vw; } /* Translated from <meta name="viewport" content="initial-scale=1.0"> */ @viewport { zoom: 1.0; min-width: extend-to-zoom; max-width: extend-to-zoom; } これらの@viewport翻訳に到達した方法: …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.