leaf_0442.jpg
■ HOME

■ホームページをスマホ携帯用に簡単に表示させる

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

をヘッダに挿入すればOK。
これはデバイスのウィンドウ幅（ビューポート）に合わせて、スケール100％（＝1.0）で表示します。
という意味らしいです。

例：

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="author" content="crayonzen">
  <title>ホームページをスマホ携帯用に簡単に表示させる</title>

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

</head>

■あと、大きい画像や大きいテーブルはピクセル指定の[数値]ではなく[%]を使う
width="640"　だったら　width="100%"　でOK。

例：

 <body>
  <img src="image/sky_001_640x360.jpg" alt="sky_001_640x360.jpg" height="360" width="640">
</body>

を

<body>

  <img src="image/sky_001_640x360.jpg" alt="sky_001_640x360.jpg" width="100%">

</body>

にする。


数値指定で画像がビューポートの幅を超えるとPCだとブラウザの横のスクロールバーが有効になり
スマホだと横のスクロールタップが有効になり、「ゆるっ」と動きます。

また、小さい画像や大きい画像などまとめて処理したい場合はスタイルシートのCSSなどに

img {
  max-width: 100%;
  height: auto;
}

と、書いておけばいいみたい。
ウィンドウ幅より大きければ縮小し、小さければ元のサイズより大きくならない。
もちろん下記のようにページのヘッダに書いてもOK。

<style type="text/css">
  img {
  max-width: 100%;
  height: auto;
 }
</style>

以上です。
leaf_1815.jpg

スマートフォンで表示させるために色々と検索し検討した結果
モバイル用のスタイルシート（.css）を使うやら、javascriptを使うやら、いろいろ面倒な事が書かれています。
スタイルシートはレイアウト一括変更に便利なので確かに私も使ってますが、使わなくてもできます。
javascriptも無くてもできます。
このページがそうだからです。
2018-12-29

このページから入った人用に。。。

□さんぷる：　CrayonZen [HOME]

□「ゆるっ」と動くさんぷる：　lisp_for_xyzzy