パソコンの有効活用で、ホームページの作成を始めました。
自作パソコンや周辺機器、スマホの買換えなども整理しました。
特殊なアプリや部品交換等の改造もメモしています。
電子機器として、ブルーレイやドライブレコーダー・・等々。
   

ホームページ作成関連
スマホ用 viewport の設定

スマホ用の画面に対応するように色々と調べましたが、スマホの画面解像度の種類も多く、全てに対応する時は

 content="width=device-width

のように記入することが多いようです。

しかし色々なスマホの画面解像度に対応するように、500ページ前後を編集するのは大変なので一旦諦めました。

その後パソコン用とスマホ用に大きく2つに分ければ意外と簡単という記事を見つけました。楽な解決策は大いに賛成で早速実行してみました。

作業手順

  1. パソコン・タブレット用とスマホ用の画面構成を決める
  2. viewportを使って、まず スマホやタブレット用の設定を行う
  3. JavaScriptを使って、さらに スマホ用の設定を行う
  4. css内で、スマホ用の設定変更を行う
  5. 実際の パソコン と スマホ の表示画面

パソコン・タブレット用とスマホ用の画面構成を決める

各画面表示幅を下記のように決めました。

下記のようなレイアウトになります。

パソコン・タブレット用画面       スマホ用画面
ヘッダー 1000px ヘッダー 700px


メイン
700px


右サイド
 300px


メイン
700px


フッター 1000px 右サイド 700px
フッター 700px


実際の表示画面は下記のようになりました。

スマホ用の変更設定として

 


viewportを使って、まず スマホやタブレット用の設定を行う

HTMLの<head>・・・</head>内に下記の1行を記入すると、スマホやタブレットの時のみ viewport を設定してくれます。

改行無しの1行で記入します。

<meta name="viewport" content="width=1000,user-scalable=yes">

私はまずタブレットを意識して、1000pxに設定しました。


JavaScriptを使って、さらに スマホ用の設定を行う

スマホ用には画面表示幅を700pxとしました。

スマホとタブレットに同じ画面表示幅700pxを使用する時は、

上記の width=1000 を width=700 に変更して、次の JavaScript は使用しません。

もっと小さくした方が文字等も大きくなり読みやすくなりますが、かなり編集する必要がある為今回は妥協しました。

JavaScript の記述

var ua = navigator.userAgent;

var getDevice = (function(){

if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){

// スマホの時のみ下記が実行されます

document.write('<meta name="viewport" content="width=700">');

}

})();

今回は viewport.js というファイル名で保存しました。

HTMLの<head>・・・</head>内に追加記入します。

<meta name="viewport" content="width=1000, user-scalable=yes">

<script type="text/javascript" src="../../javascript/viewport.js"></script>


css内で、スマホ用の設定変更を行う

スマホの場合は設定を変更し、画面幅や文字サイズの調整をします。

css内で画面幅が 700px以下の時にのみ設定が実行されます。

css の最後に追加記述(参考)

@media screen and (max-width:700px) {
  body {
     width: 700px;
     font-size: 90%;
     }
  .top-text {
     font-size: 27px;
     }
}

色々なセレクタを上記 .top-text に続けて何種類でも追記できます。


実際の パソコン と スマホ の表示画面

表示画面は下記のようになります。

左はパソコンで表示した画面、右はスマホで表示した画面です。