4

実際のデバイスの画面サイズを取得する際に問題があります。jsfiddle を見てください: http://jsfiddle.net/glenswift/CpBkU/

出力フレームのサイズを変更すると、h1 テキストが変更されます。h1のさまざまな部分のピクセルサイズを知っているので、デスクトップで正しく動作します。しかし、大きな dpi と小さな画面のデバイスでは、私の解決策は機能せず、テキストが画面からはみ出します。

この問題を解決する方法がわかりません。類似の質問 ( 1、2 ) を見たことがありますが、役に立ちません。

私のコード:

function setPositions(){
    var W = $(window).width(),
        h1 = '';
    if (W < 210) {
        h1 = 'Hello';
    } else if (W < 270) {
        h1 = 'Hello World';
    } else {
        h1 = 'Hello World Text'
    }
    $('h1').empty().text(h1);
}
$(document).ready(function(){
    setPositions();
});
$(window).resize(function(){
    setPositions();
});

本当にありがとうございました。

4

4 に答える 4

5

メディア クエリに関するもう 1 つのことhttp://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

それは本当に私の心を開いた素晴らしい記事です:)

楽しい！

于 2013-05-01T20:15:29.380 に答える
4

meta タグには必ず「viewport」を使用してください。レスポンシブ Web デザイン用です。すなわち<meta name="viewport" content="width=device-width" />

参考：http ://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

于 2013-04-29T09:42:36.827 に答える
3

興味深いことに、CSS アプローチを試してみました。これを再確認するための網膜ディスプレイデバイスはありませんが、これがどのように見えるかを確認してください：http://jsfiddle.net/panchroma/Z678z/

特定のケースではこれが実用的ではないことはわかっていますが、画像ではなくテキストを扱っているため、CSS にはいくつかの利点があります。

HTML 

<h1 class="small">Hello</h1>
<h1 class="med">Hello World</h1>
<h1 class="lge">Hello World Text!</h1>

CSS 

 @media (max-width: 210px){
 .small{
 display:inherit;
 }

 .med, .lge{
display:none;
}  
}

etc

ビューポートに応じて、h1 テキストは、hello、hello world、hello world のテキストに変わります。

于 2013-03-24T20:05:30.180 に答える