0

レスポンシブ Web サイトがあります。私は既に持っています...

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

...ヘッダーに。Web サイトは、スマートフォンの画面に収まるようにすべてを自動的に縮小するだけではありません。DIV の適切なサイズ (固定かパーセンテージかに関係なく) が維持され、それに応じて要素が収まるように設計されます。

ただし、あるページには、いくつかの要素を含むインタラクティブな図があります。これらはブロック (内部にテキストを含む) であり、固定幅を維持する必要があります。問題は、これらの固定幅がスマートフォンの画面よりもはるかに大きいことです。横幅1000pxくらいです。

この div パーセンテージをベースにすることはできません。幅は少なくとも 1000 ピクセルで、すべてのデバイスでそのサイズを維持する必要があります。明らかに、これはスマートフォンの画面に収まらないことを意味します。

私がやりたいことは、使い続けることです...

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

...この 1 つの DIV を除く、私の Web サイトの他のすべての要素。親 DIV 全体、その子 DIV、および子 DIV 内のテキストをスケーリングする必要があります。

CSSの「ズーム」プロパティを試しました。ただし、テキストが適切にスケーリングされず、子 DIV の幅が均等に「ズーム」されていないようです。それらは一致しなくなります。

このメタ ビューポート タグを、この特定の固定幅 DIV 以外のすべてに条件付きで適用するにはどうすればよいですか?

4

2 に答える 2

1

div とそのネストされた要素を調整するために改ページする css メディア クエリを記述する必要があります。

これは、使用できるcss3メディアクエリテンプレートの要旨ですhttps://gist.github.com/marcobarbosa/798569

またはさらに良いことに、ブートストラップのレスポンシブグリッドhttp://getbootstrap.com/2.3.2/を使用します

于 2013-09-11T19:06:09.150 に答える
0

免責事項：これがあなたが探しているものであるかどうかは正確にはわかりません。コメントで説明を求めるのに十分な担当者がいないため、可能性があります...

<meta name="viewport" content="width=1000" />

...ここで、「1000」px は、含めようとしている div の固定幅です。「initial-scale」属性を省略することにより、デバイスはそれ自体に適用する必要があるスケーリングを把握する必要があります。

于 2013-09-26T13:55:02.500 に答える