サンプル2
とりあえずレシポンシブル
画面幅を設定し、画像やTABLEを収める
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
<style>
  /*imgがあったら最大幅は表示幅に*/
  img {
    max-width: 100%;
    border: 0px;
  }
  /*tableがあったら最大幅は表示幅に*/
  table {
    max-width: 100%;
  }
/*横500ピクセル以上のディスプレーの場合の表示幅 (PC,スマホ横)*/
@media screen and (min-width: 500px) {
  body {
    /*従前ページに必要な幅を設定する*/    
    width: 750px;
    margin: 0 auto; 
    Word-break:break-all;
   /*iPhone横位置でのフォント拡大をふせぐ*/
    -webkit-text-size-adjust: 100%;
  }
}
/*横499ピクセル以下のディスプレーの場合の表示幅 (スマホ縦)*/
@media screen and (max-width: 499px) {
  body {
    /*スマホ横幅にあわせた設定をする*/
    width: 375px;
    margin: 0 auto; 
    word-break: break-all;
    -webkit-text-size-adjust: 100%;
  }
}
</style>
</head>

TABLE表示

text...

text...

text...

text...

IMG表示


もどる