問題タブ [adaptive-design]

作業中のサイトで、Galleria.js を使用してバックグラウンド スライドショーを作成しています。さまざまなデバイスにさまざまな解像度を提供できるようにしたいと考えています。私は必要なファイルを生成しているadaptive-images.phpを使用していますが、ガレリアは何があっても元のフル解像度のものをまだ引き出しているようです。これを機能させる方法、またはおそらくpicturefill.jsのような代替ソリューションはありますか?

ありがとう！

レスポンシブで構築した Web アプリを作成しています。一部の画面の幅を 360px より小さくすることができませんでした。しかし、多くのスマートフォンは 320px 幅で表示しようとしています。360px までレスポンシブになるようにするにはどうすればよいですか?

更新: 投稿する前に、次のビューポート タグを既に指定していました。

そして、コンテナの最小幅を 360px に設定しました。問題は、これを行うと、ユーザーが最初に IPhone としてサイトにアクセスしたときに、右側の 40 ピクセルが非表示になり、他の多くのユーザーはデフォルトで 320 ピクセルしか表示できなくても表示されることです。ズームアウトできることは知っていますが、ロード時に幅 360 ピクセルで表示したいと考えています。

最近、Web サイトのコンポーネント要素の作成を依頼されました。このコンポーネントは、完全にサイズ変更できる必要があります。私が望むのは、さまざまなサイズのレイアウトを作成するために CSS3 メディア クエリを利用することです。コンポーネントが最初にページ全体を表示する場合はうまく機能しますが、幅が 50% の div 内に配置すると、サイズが半分に変わりますが、内部レイアウトには反映されません。私が望むのは、メディア クエリが提供するのと同じ動作ですが、コンポーネント指向のアプローチです。CSSで可能ですか？

調査回答アプリケーションを再設計しており、デスクトップ、タブレット、およびスマートフォンで動作するようにしたいと考えています。デスクトップとタブレットは多かれ少なかれ同じインターフェイスを使用できますが、電話は別の問題です.

大画面アプリのインターフェイスは、多かれ少なかれ、最初の列に一連の質問があり、次の列に回答が表示された表です。(質問には 1 (bool) から 9 までの選択肢があります)。しかし、このデザインを小さな画面に簡単に移植することはできません。だから私の考えは、画面の幅が特定のしきい値を下回ったときに単一の質問を表示することでした.

すべての質問は事前に読み込まれ、すべての回答は「クリック時に」サーバーにプッシュされます。（はい、JSは答える必要があります）。CSS を使用して、大画面アプリで質問の「ページ」/「グループ」を切り替えています。小さな画面で同じことをしたいのですが、今回は質問のグループではなく、単一の質問の間だけです。

私の絶妙なスケッチを見てください：

「レスポンシブ/アダプティブデザイン」でこれを行うことはできますか? それとも、異なる画面サイズで 2 つの異なるビューをロードする必要がありますか?

少し問題がありviewWillAppearます。自動レイアウトの制約がまだ解決されていないようです。実際、私は新しいアダプティブ UI を使用しています。デフォルトのサイズは 600x600 で、実際のデバイス サイズを表しているわけではありません。しかし、シミュレーターを起動すると、メイン ビューのサイズviewWillAppearはまだ 600x600 であり、実際のデバイス サイズではありません!!!

ビューが表示される前に、ビューの最終的なサイズを実際にテストできるのはいつですか? あなたが理解できるので、私はそれをしたくないのでviewDidAppear、ユーザーには何らかのちらつきがあります...

前もって感謝します。

新しい携帯電話の UI の更新に取り組んでいます。当然、iphone6/6 plus で小さく表示されるテキスト フィールドがいくつかあります。

アプリを IOS5 に戻す必要があるため、自動レイアウトや新しいアダプティブ テキスト フィールドを使用できません。少し調べてみましたが、あまり話題に上っていないようです。

if(IPHONE6){...} でテキストフィールドのサイズを設定することに本当に頼りたくないので、誰かがより良いアイデアを持っているなら、私はすべて耳にします!

アダプティブ/レスポンシブ サイトを構築しようとしています。

私の意図は、画面幅 >= 1024px のすべてのデバイスでデスクトップ バージョンを表示し、レスポンシブ CSS を使用して要素をスケーリングすることです。すべての要素がこのビューに表示されます。

1024px 未満の画面の場合、表示は異なり、表示される要素のシリーズが異なり、レスポンシブ CSS ルールのセットも異なります。

そのため、サーバー側で画面の幅を決定できる必要があります。

Javascript Cookie と AJAX を使用してこれを行うことができることはわかっていますが、そのようにしたくないので、何らかの ASP.NET プラグインを探していたので、51Degreesに出会いましたが、あまり成功していません。 ..

Google Chrome モバイル エミュレーターを使用すると、常に正しくない幅の結果が得られます。ほとんどの場合、Blackberry Playbook だけが正しいのです! iPhone は 640 ピクセルの幅を返し、多くのデバイスは幅を 2 ​​倍にしています。これは、デバイスのピクセル比が原因であると推測されます。

さらに、コードが古くなっています。つまり、iPhone6 などを無視します。これは、参照ファイルを自動的にダウンロードして更新するために有料バージョンを使用する必要があることを意味していると思いますか?

コードは単純です:

しかし、上記の私のコメントに基づいて、これは私の目的にとって概して無意味です.

以前は、次のようなユーザー エージェントを検査する正規表現クエリを使用していました。

これは正常に機能しますが、範囲が広すぎて、たとえば、モバイルとして扱いたくない1024の画面解像度を持つGalaxy Tabであっても、Androidデバイスをモバイルとして返します。iPad をモバイルとして扱わないようにコードを変更したことがわかりますが、Tab で同じことを行うことに失敗しています。

最後に、私の実際の質問:これを達成するための現実的なアドバイスを持っている人はいますか、またはユーザーエージェントからこのデータを取得するために呼び出すことができる定期的に更新される API を知っていますか...?

プロジェクトで汎用コンポーネントとして使用されるカスタム モーダル ポップアップを開発しました。モーダルがどこから開かれたかに関して、異なる content/html がモーダル内に渡されます。

プランク - http://plnkr.co/edit/aApQZhgMZJkMAjLtjF5P?p=preview

HTML:

CSS

JS

)

上記の plunk に示すように、ボタン 1 がクリックされると、ポップアップ内のコンテンツが少なくなるため、ポップアップのサイズが非常に小さくなります。しかし、ポップアップが別のボタンから呼び出されると、そこには多くのコンテンツがあります。現在、モバイル (iphone/nexus)、タブレット (nexus/ipad/ipadmini)、およびデスクトップ ブラウザーなど、ほぼすべてのプラットフォームでこれを機能させる必要があります。

私が直面している問題:

1) モーダルがボタン 1 から開かれると、モーダルの幅は非常に狭くなります。これは、コンテンツが少なく、数行のテキストを含む小さなリストであるためです。

2）2番目のボタンからのモーダルは携帯電話の画面全体を占めるため、モーダルの幅を100％に保ちたいと思いました。しかし、それを行うと、タブレットとデスクトップでも全画面を占有しますが、これは必要ありません。タブとデスクトップで 50% しか占有しないはずです。また、モーダルがポイント 1 のときやボタン 1 から開いたときと同じくらい小さいままであることを確認する必要もあります。

3) モーダルは body タグに直接追加されます

4) モーダルはジェネリック コンポーネントであるため、どこから呼び出されても同じスタイルを維持したいだけです。また、さまざまなインスタンスを処理するために、モーダル内の div をさまざまな幅に使用できます。

したがって、4 つの点すべてを考慮すると、すべてのプラットフォームで動作させることはできません。デスクトップ/タブレットでは実行できましたが、100% の画面が必要なため、電話では実行できませんでした。