モバイルウェブサイトのフォントサイジングとラッピング

Question

私はシンプルな静的なウェブサイトを持ち、その中にテキストが数行あります。

モバイルデバイスからのみアクセスされます。テキストのフォントサイズは、画面の高さの1/3になり、画面の幅に基づいて行が折り返しになります。

CSS & HTMLのみで対応できますか？もしそうなら、どのように？

ありがとう

Answer 1

簡単な答えは、モバイルデバイスに基づいてプログラムでスタイルシートを提供することです。あなたとあなたのCSSファイルで行うことができます。

@media screen and (max-device-width: 480px) { 
    font-size: 160px; /* 1/3 max screen height */ 
} 

代わりに、あなたは、動的にスタイルを設定し、ビューポートの幅と高さを計算するためにJavaScriptを使用することができます。

window.onload = function() { 
    var viewportwidth; 
    var viewportheight; 

    if (typeof window.innerWidth != 'undefined') { 
     viewportwidth = window.innerWidth, 
     viewportheight = window.innerHeight 
    } else if (typeof document.documentElement != 'undefined' 
    && typeof document.documentElement.clientWidth != 
    'undefined' && document.documentElement.clientWidth != 0) { 
     viewportwidth = document.documentElement.clientWidth, 
     viewportheight = document.documentElement.clientHeight 
    } else { 
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
     viewportheight = document.getElementsByTagName('body')[0].clientHeight 
    } 
    document.body.style.fontSize = viewportheight/3; 
} 

セットwhite-space: normalとCSSでwordwrappingとは、必要に応じて、word-wrap:break-word