パソコン・スマホ共用化の問題点

パソコン・スマホの共用化(PCSM化)、どちらで見ても同じように見えるようにファイルを作り変えている途中で出くわしたものである。

IEでは次のように見えている(Fig.1)IEをメインに作っているからとこれは当然である。
(Fig.1)


しかし、これがEdge(Fig.2)やスマホ(Fig.3)では次のようになってしまう。なお、Edgeは拡大率(ズーム)は80%のものである。100%にしてもほぼこれと同じ。

(Fig.2)(Fig.3)

さて、これはどこに原因があるのか。その修正にいろいろやってみる。
Edgeからは、テキストボックスが長すぎて枠のサイズに収まらないのでそれが下段に移動して表示されている。その結果、下のボタン類が枠の下にはみ出ていることがわかる。
スマホからは縦のサイズ(height)が少し小さいことがわかる。この点を修正する必要がありそうである。

この画面の右上のボックス(枠)のスタイルは次のようになっている。

参考
.fxwt {position:fixed;
    top:0px;
    right:0px;
    width:280px;
    height:70px;
    color:navy;
    font-family:"MS 明朝",serif;
    font-size:14px;
    line-height:1.1;
    background-color:#ffffcc;
    border:1px solid #669999;
    padding:4px;
    border-radius:8px;
}

そのボックスの中身は次のようになっている。

参考
<div id="fxtop" style="display:none;" class="fxwt">
<table>
<form method="post" action="https://***.cgi" target="_blank">
<tr><td><select name="para1" class="cmbb">
  <option value="c_cpp" selected>C/C++</option>
  <option value="windows">Windows</option>
</select>
<input type="text" name="para2" size="20" value="" class="txtp"></td></tr>
<tr><td class="rt"><input type="submit" value="検 索" class="btnr">
<input type="reset" value="消 去" class="btnb">
<input type="button" value="終 了" onclick="ddisp('fxtop')" class="btnb"></td></tr>
</form>
</table>
</div> 

こう見てくると、テキストボックスの「size="20"」という指定に問題がありそうである。ここをwidthを使ったpx指定に変更すればEdge(Fig.2)のようなことは起こらないのではないか(推測)。
そこでスタイルの指定などを変更してみる。外枠の高さを75pxにし、コンボボックスとテキストボックスのサイズをwidthを使ったpx指定にする。 tableが枠の真ん中にくるようにmarginをautoにする。他はほとんど変更なし。

参考
.fxwt {position:fixed;
    top:0px;
    right:0px;
    width:280px;
    height:75px;
    color:navy;
    font-family:"MS 明朝",serif;
    font-size:14px;
    line-height:1.1;
    background-color:#ffffcc;
    border:1px solid #669999;
    padding:4px;
    border-radius:8px;
}
table {margin:auto;}
select {width:80px;font-size:1em;color:purple;}
input[type="text"] {width:150px;font-size:1em;color:purple;}
input[type="submit"] {font-size:0.9em;color:red;}
input[type="reset"] {font-size:0.9em;color:blue;}
input[type="button"] {font-size:0.9em;color:maroon;}

スタイルはstyleタグ部分に移したのでフォームからはclassは削除した。

参考
<div id="fxtop" style="display:none;" class="fxwt">
<table>
<form method="post" action="https://***.cgi" target="_blank">
<tr><td><select name="para1">
  <option value="c_cpp" selected>C/C++</option>
  <option value="windows">Windows</option>
</select>
<input type="text" name="para2" value=""></td></tr>
<tr><td class="rt"><input type="submit" value="検 索">
<input type="reset" value="消 去">
<input type="button" value="終 了" onclick="ddisp('fxtop')"></td></tr>
</form>
</table>
</div> 

これでEdge(Fig.4)やスマホ(Fig.5)ともほぼ想定したようにものになった。
(Fig.4)(Fig.5)

- 2020/12/12 -