web-dev-qa-db-ja.com

ウェブサイトをモバイルデバイスにスケーリング

レスポンシブレイアウトをモバイルデバイスで使用できないWebアプリがあるので、ビューポートのスケーリングを少し試してみましたが、成功しませんでした。

ページサイズは1280x720なので、小さな画面ではズームアウトし、大きな画面ではズームインする必要があります。

var scale = $(window).width() / 1280;

$('head').append('<meta name="viewport" content="width=device-width, height=device-height, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

私は幅に対してこれを試しただけですが、結果は望ましいものではありません、何か間違っていますか？

htmlzoomscalemeta-tags
9
slash197

あなたが何を達成しようとしているのか正確にはわかりませんが、次のhtml

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

そして次のJS

var siteWidth = 1280;
var scale = screen.width /siteWidth

document.querySelector('meta[name="viewport"]').setAttribute('content', 'width='+siteWidth+', initial-scale='+scale+'');

モバイルデバイスで最初にズームインまたはズームアウトしたページを表示できるはずです。デバイスが縦向きであることを確認する必要があります。横向きの場合は、screen.widthではなくscreen.heightを使用する必要があります。

6
Ben

私にとっては、css-layoutファイルを作成し、それをhtmlファイルにリンクして、すべての幅をクエリするか、bootstrapを学習すれば、私が何をしなくてもサイトはモバイル対応になります（ブートストラップは苦痛です）私のためにjsを編集する）これをクエリする限り、私はそれを書き出す方法です

あなたのhtmlで

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=no">

その後、あなたのCSSで

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.css-element {
yourcsscode:;
}
   }

私はそれを書くだけですが、あなたはあなたのウェブページのためにあなたのCSSを望んで、そして上に示されるように寸法を構築しますまた、あなたがメインバーのためのCSSを作成し、@ mediaを使用し、CSSを変更できるようにしたいと言うことができますそのナビゲーションでメニューバーを表示します。

また

.css-element{
display:block;
}

そして

.css-element{
display:none;
}

クエリするときに本当に役立つ

4
Anthony

レスポンシブウェブサイトを設計するにはさまざまな方法があります。

CSS Media Query。

          /* For mobile phones: */
          [class*="col-"] {
        width: 100%;
           }
          @media only screen and (min-width: 600px) {
         /* For tablets: */
       .col-m-1 {width: 8.33%;}
       .col-m-2 {width: 16.66%;}
       .col-m-3 {width: 25%;}
       .col-m-4 {width: 33.33%;}
       .col-m-5 {width: 41.66%;}
       .col-m-6 {width: 50%;}
       .col-m-7 {width: 58.33%;}
      .col-m-8 {width: 66.66%;}
      .col-m-9 {width: 75%;}
      .col-m-10 {width: 83.33%;}
      .col-m-11 {width: 91.66%;}
      .col-m-12 {width: 100%;}
         }
        @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
         }

ポートを表示します。

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
2
king zecole

$(window).width()の代わりに、window.outerWidthを試してください。また、device-widthではなく、ピクセル単位の適切な幅を使用してください。したがって、コードは次のようになります。

var scale = window.outerWidth / 1280;

$('head').append('<meta name="viewport" content="width=1280, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

Chrome、Opera、Firefoxのモバイルバージョンで動作します。それがどのように機能するかを教えてください。

1
Rei

ブートストラップを適用しています。

すべてのdivクラスにcol-xs（col-xs-4からcol-xs-12）を使用し、cssメディアクエリを使用して要素に固定の幅/高さを指定してください。

0
edward

window.innerWidth & window.outerWidthプロパティを使用して幅を動的に計算します。

0
Ghost Developer