web-dev-qa-db-ja.com

すべてのモバイル/タブレット表示形式のdivサイズを自動調整する方法

4つのdivタグがページにあるページを設計しました。携帯電話（5インチ）でページをテストすると、ページに完全にフィットします。タブレットで同じページをテストすると、ページが画面の30％に収まります。すべてのタイプの画面に適合するようにdivサイズを設定するにはどうすればよいですか。

フィドルリンク

HTML：

  <div class="bubble0" align="center">
     <h3>Three  Levels </h3> 
  </div>
  <div class="bubble"  align="center"> </div><br/><br/>
  <div class="bubble1" align="center"> </div><br/><br/>
  <div class="bubble2" align="center"> </div><br/><br/>
  <button>Play</button>

提案があれば、

htmlcsscss3jquery-uijquery-mobile
20
Vinod

これは Responsive Web Development（RWD） と呼ばれます。ページをすべてのデバイスに応答させるには、次のような基本的な基礎を使用する必要があります。

1。ヘッドにビューポートメタタグを設定します：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0"/>

2. メディアクエリ 。を使用

例：-

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

3。または、直接使用できます RWD framework ：-

良い記事の一部

標準デバイスのメディアクエリ-BY CHRIS COYIER

CSSメディアの寸法

4。大型デバイス、中型デバイス、小型デバイスのメディアクエリ。 （私のシナリオで作業する。）

以下の一般的なデバイスタイプのメディアクエリ：-大きいデバイス、中程度のデバイス、および小さいデバイス。これは、すべてのシナリオで機能する基本的なメディアタイプであり、さまざまなメディアクエリを使用する代わりに、3つのメディアタイプを処理するだけでコードを処理できます。

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}
55
Mike Phils

あなたの質問はあなたが望むものについて少し不明瞭ですが、あなたのコメントから判断すると、私はあなたがeachバブルが垂直に、そして水平に。その場合、垂直部分がトリッキーな部分です。

他の多くの人が答えているように、まずエミュレートされた「デスクトップ幅」ビューポートの代わりに「理想的な」ビューポートを使用するようにモバイルデバイスをトリガーするビューポートメタタグを設定する必要があります。このタグの最も簡単で最も簡単なバージョンは次のとおりです。

<meta name="viewport" content="width=device-width, initial-scale=1">

出所：PPK、おそらくこのようなものがどのように機能するかについての主要な専門家。 （ http://quirksmode.org/presentations/Spring2014/viewports_jqueryeu.pdf を参照）。

基本的に、上記により、メディアクエリとCSS測定が、最適化されていないデスクトップレイアウトで動作するようにページを縮小するのではなく、特定のデバイス上の仮想「ポイント」の理想的な表示に対応します。詳細を理解する必要はありませんが、重要です。

正しい（偽造されていない）モバイルビューポートを使用できるようになったため、ビューポートの高さを調整することは依然として難しい問題です。一般に、Webページは垂直方向に拡大しても問題ありませんが、水平方向には拡大できません。したがって、何かにheight: 100%を設定すると、その測定値は他の何かに関連する必要があります。最上位レベルでは、これはHTML要素のサイズです。ただし、HTML要素の高さが画面よりも高い（およびコンテンツを含むように拡大する）場合、パーセンテージでの測定値はおかしくなります。

vh単位を入力します。パーセンテージのように機能しますが、包含ブロックではなく、ビューポートに関連して機能します。 MDN情報ページ： https://developer.mozilla.org/en-US/docs/Web/CSS/length#Viewport-percentage_lengths

そのユニットを使用すると、期待どおりに機能します。

.bubble { height: 100vh; } /* be as tall as the viewport height. Done. */

多くのブラウザ（IE9以降、最新のFirefox、Safari、Chrome、Operaなど）で動作しますが、すべてではありません（サポート情報はこちら： http://caniuse.com /＃search = vh ）。動作するブラウザの欠点は、iOS6-7に大きなバグがあるため、この手法がこのケースで使用できなくなることです（詳細： https：/ /github.com/scottjehl/Device-Bugs/issues/36 ）これはiOS8で修正される予定です。

プロジェクトのHTML構造に応じて、mayと同じくらいの高さであると想定される各要素でheight: 100%を使用して回避することができます次の条件が満たされている限り、画面：

  1. この要素は、<body>の直接の子要素です。
  2. htmlとbodyの両方の要素には、100％の高さが設定されています。

私は過去にその手法を使用しましたが、それはずっと前であり、ほとんどのモバイルデバイスで動作するかどうかはわかりません。試してみてください。

次の選択肢は、JavaScriptヘルパーを使用して、ビューポートに合うように要素のサイズを変更することです。 vhの問題を修正するポリフィルまたはその他の何か。悲しいことに、すべてのレイアウトがCSSで実行できるわけではありません。

15
Emil

ビューポートの高さを使用して、divの高さをheight:100vh;に設定するだけで、divの高さをデバイスのビューポートの高さに設定できます。さらに、必要に応じてデバイス画面で、マージンとパディングを0に設定します。

さらに、ビューポートメタタグを設定することをお勧めします。

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />

これは比較的新しく、IE8ではサポートされていないことに注意してください。このアプローチを検討する前に、サポートリストを確認してください（ http://caniuse.com/#search=viewport ）。

お役に立てれば。

10
Karim AG

あまり時間がないので、あなたのjsfidleはすぐには動作しませんでした。
しかし、これはあなたが始めるのに役立つでしょう。

まず、HTMLタグにcssを配置しないようにしてください。好む align="center"。
CSSにそのようなものを入れます。はるかに明確であり、それほど高速ではありません。

レスポンシブレイアウトを設計する場合は、css3で導入されたメディアクエリを使用する必要があります。

Cssの例：

@media screen and (min-width: 100px) and (max-width: 199px)
{
    .button
    {
        width: 25px;
    }
}

@media screen and (min-width: 200px) and (max-width: 299px)
{
    .button
    {
        width: 50px;
    }
}

メディアクエリ内で任意のcssを使用できます。
http://www.w3.org/TR/css3-mediaqueries/

7
Noel Widmer

私は私のドキュメントでこのようなものを使用しています

var height = $(window).height();//gets height from device
var width = $(window).width(); //gets width from device

$("#container").width(width+"px");
$("#container").height(height+"px");
2
Sergio Pereyra Ortega

フィドル

すべてのデバイスに設定できる高さを設定したいですか？

サイトのデザイン、つまりさまざまなデバイスの高さを決定します。

例：

  • Height-100pxは、-min-width: 700pxを含むデバイスのバブル用です。
  • Height-50pxは、< 700pxを使用したデバイスのバブル用です。

高さ50ピクセルのCSSを用意してください。

このメディアクエリを追加します

  @media only screen and (min-width: 700px) {
    /* Styles */
    .bubble {
        height: 100px;
        margin: 20px;
    }
    .bubble:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble1 {
        height: 100px;
        margin: 20px;
    }
    .bubble1:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble1:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
    .bubble2 {
        height: 100px;
        margin: 20px;
    }
    .bubble2:after {
        bottom: -50px;
        border-width: 50px 50px 0;
    }
    .bubble2:before {
        top: 100px;
        border-width: 52px 52px 0;
    }
}

これにより、700px以上のデバイスでバブルの高さが100pxになり、マージンが20pxになります。

2
Sudheer

私は同じ質問に対する私の答えを探していましたが、これを見つけました：

<img src="img.png" style=max-
width:100%;overflow:hidden;border:none;padding:0;margin:0 auto;display:block;" marginheight="0" marginwidth="0">

タグ（iframeまたはimg）内で使用でき、画像はデバイスに基づいて調整されます。

1
Xiaxia Quiambao

Divに100%の幅を与えてみてください。

0
Mohammad Areeb Siddiqui

シンプル：

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0" />

乾杯！

0
Farhad