問題タブ [viewport]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
iphone - iPhoneとiPadでビューポートとスケーリングをテストするための最良の方法
実際のハードウェアを購入せずに、モバイルデバイスのWebレイアウトをテストする方法を探しています。私は主にiPhoneとiPadのテストに興味があります。私はiPhoneを所有しているので、そこで適切なテストを行うことができます。しかし、iPadでどのように表示されるかを確実に知ることはできません。いずれにせよ、生産性を高めるためにMacでビジュアル出力を作成しているので、それを確認するとよいでしょう。
testiphone.comはWebサイトの外観をシミュレートすることになっていますが、レイアウトスケールのレンダリングには違いがあります。私のiPhoneハードウェアでは、コンテンツの幅が画面の左右の余白に合うようにスケーリングされます。testiphone.comシミュレーターでは、コンテンツはまったくスケーリングされません。
では、視覚的なレイアウトを一貫してテストできる方法はありますか?
(私はDeveloper SDKにサブスクライブすることに反対していませんが、ビューポートとスケーリングを一貫して動作させるためのより高速で簡単な方法がある場合は、それをお勧めします!)
ipad - 縦向きと横向きの間の iPad ビューポートの問題
iPadに表示されるWebページがあります。ビューポートにこのメタを追加しました:
縦向きでも問題なく動作し、iPad が横向きモードになると問題なく動作します。問題は、横向きから縦向きに戻ると、ページが伸びすぎて、ページの一部が縦向きモードで画面からはみ出すことです。通常の表示に戻すには、画面をダブルタップする必要があります。
次に試しました:
しかし、ポートレート モードでは十分な幅がなく、アイコン/テキストが 1 行だけであるべきときに 2 行に折り返されます。全部まとまります。助言がありますか?
xna - XNA ビューポートでゲームのインスタンスを作成する
私は2つのクラスを持っています:
1) onePlayerGame.cs このクラスは、画面上の 4 つのビューポートを定義します
2) game1.cs このクラスは単純なゲームです
ビューポートの 1 つで game1 を実行するにはどうすればよいですか? どちらのクラスもうまく動作します...しかし、ビューポートの1つにゲームを「表示」する方法がわかりません..
ああ...私は2Dプロジェクトをやっています
助けてください~~~
model-view-controller - ビューポート Sencha Touch で条件付きツールバーを適用
私は Sencha で MVC ルートに行きます。Twitter の例と同じように初期化されたビューポート パネルがあります。
新しいコード:
ビューポートで現在レンダリングされているパネルのタイプに基づいて、条件付きで DockedItems (ツールバー) を適用できるようにしたいと考えています。例: ログイン、ホーム画面、詳細画面などに 1 つ。
Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]}); を使用してみました。しかし、それはうまくいきません。現在、現在レンダリングされているパネルにツールバーを追加してフルスクリーンに設定することは機能しますが、残念ながら、構造が
誰か提案がありますか?
php - 画面幅・ビューポートサイズ:JS~PHP。Wordpress の出力/ビューを操作するには
単一の Wordpress テーマでデスクトップとモバイルの機能を取得したいと考えています。
post/get メソッドを使用して画面サイズを php に送信するソリューションがいくつかあります。例: http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
私の質問は、Wordpress でこれを実装する方法です。参考までに、PHP は次のように構成されています。
index.php:
体
質問は次のとおりです。
get_header() が index.php から呼び出される前に、画面の高さ/幅/ビューポートを PHP 変数に取得する方法はありますか?
モバイル デバイスを検出するための優れた WP プラグインがいくつかあります。それらに関する私の問題は、それらがほとんど信頼できないユーザーエージェントデータを主に使用していることです。ユーザーのビューポートに基づいてデザインを変更したい。そのためには、テーマ内の Wordpress PHP 呼び出しも操作する必要があります。
html - ビューポートを超えて切り取られた背景画像
手に負えないサイトのURL:http: //chrism.se
ライブにした後、ビューポートがコンテンツに対して小さすぎてスクロールが必要な場合、背景画像(body-tag、repeat-x)が最初のビューを超えて拡張されないことがわかりましたが、拡張できません私の人生のために、それを修正する理由と方法を理解してください。覚えておくべき注意点は、私はJavascriptに精通しておらず、デザイナーが派手な効果を望んでいたため、自分でサイトをコーディングしなかったことです。私の先輩は確かに救済策を見つけることができましたが、残念ながら彼は不在であり、私はこれをまとめたいと思います。
htmlとcssの状態は、この問題を見つけたときと同じですが、主に最小幅を中心に、同様の質問で見た提案を試しました。背景の違いがビューポートと同じくらい広いのがよくわかりませんか?と私の問題?
フルビュー= i.imgur.com/ 6aDpN.jpg
問題= i.imgur.com/ X6JVp.jpg
iphone - iPhoneまたはiPad専用のビューポートを設定するには?
iPhoneのビューポートに0.3の値を使用する必要があるWebサイトがありますが、iPadの場合は0.7です。
iphoneまたはiPadのみのビューポートを設定する方法はありますか?
browser - デスクトップブラウザのビューポートメタタグ?
クライアントから、デスクトップ ブラウザ用の現在の Web サイトのサイズを 30% 縮小するように依頼されています。
モバイル ブラウザのビューポート メタ タグのようにそれを行う css またはメタ タグはありますか?
ios - ビューポートがuser-scalable=noに設定されている間も、iOS/モバイルサファリはズームしますか?アクセシビリティ設定を確認してください!
この特定のモバイルSafari(一見不可能であるが文書化されていない)の問題は、今日私を長い間続けさせました、そして私がそれを理解したとき、私はちょうどここにそれについての質問を投稿しようとしていました。
問題:<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no;"/>
iPad Webアプリを設定している間も、手動ズーム(ブラウザーでのピンチ)が許可されていました。-しかし、私のiPadだけで、私のiPhoneではありません。
また、デバイスを縦向きモードと横向きモードの間で回転させて、特定の向きモードのCSSコードを確認しました。これにより、奇妙な結果が得られました。
- 横向きから縦向きに回転しても問題はありませんでした。すべてのサイズと配置は理にかなっています。
- その後、PortraitからLandscapeに回転して戻り、ビューポートはPortraitモードのときと同じ幅のままになりました。ズームイン(拡大縮小)されました。全体像/ビューポートに戻るには、手動でズームアウトする必要がありました。これは不可能なはずです。
jquery - ブラウザのビューポートが 1200px 未満の場合、css 値 (左: x) を変更します
幅が 1200px の Web ページでコンテンツをラップしています。ラップ div は、この css を使用してページの中央に配置されposition:absolute;
top:0px;
left:50%;
margin-left:-600px;
width:1200px;
height:auto;
ます。ブラウザー ビューポートの幅が 1200px 未満の場合、jQuery を使用して左の値を 50% から 0px に変更する必要があります。たとえば、現在 iPod では、ラップが中央に配置されているため、左側のコンテンツが切り取られ、横にスクロールする方法がありません。前もって感謝します。