| 記事No | ： 16473 |
| 投稿日 | ： 2021/04/20(Tue) 11:22:42 |
| タイトル | ： スマホ使用時WEB QUIZの3択の文字サイズが小さくなる |
| ID情報 | ： ohnishi |
| 投稿者 | ： ohnishi |
| URL | ： http://www.judo.jpn.org/nishimikawa/upgrade/quiz/quiz.cgi |
アンドロイドのスマホでWEB QUIZを使っていますが、三択の文字が小さくなって見ずらいです。PCではそのようなことは無いです。
対処方をお教え下さい。
（いまのところ、quiz.cgi は全くいじっていないです）
| 記事No | ： 16474 |
| 投稿日 | ： 2021/04/20(Tue) 14:18:52 |
| タイトル | ： Re: スマホ使用時・・・文字が小さい |
| ID情報 | ： hamel |
| 投稿者 | ： HUMMEL |
> アンドロイドのスマホでWEB QUIZを使っていますが、三択の文字が小さくなって見ずらいです。PCではそのようなことは無いです。
>
> 対処方をお教え下さい。
> （いまのところ、quiz.cgi は全くいじっていないです）
レスポンシブデザインではないので、当たり前の現象だと思います。
先ず、tmplフォルダ内にある「HTML」ファイル全てに「viewport」を追加します
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
↑の↓に追加
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
次にquiz.cssファイルに下記を追加
７８行目にある
div.btn {
text-align: right;
margin-top: 2em !important;
}
↑の↓に追加
/* スマートフォン用 */
@media screen and (max-width: 480px) {
/* チャレンジフォーム */
div#chal-box {
width: 93%;
margin: 1.5em 0 1.5em -7px;
padding: 20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0px 1px 10px #666;
-moz-box-shadow: 0px 1px 10px #666;
box-shadow: 0px 1px 10px #666;
border: 1px solid #808080;
background: #f2f3f9;
}
p.nam input {
width: 250px;
padding: 8px;
color: #444;
border: solid 1px #889fd0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
}
}
これで最初に表示される名前を入力するフォームは対応すると思います、
出題ページは最初の「html」ファイルに追加した「viewport」の記述で
問題ないと思います。（とりあえず、iPhone6/7/8では問題無し）
もし、出題画面の文字が小さくて見えないというのであれば、
quiz.cssファイルでhtmlファイルにあるタグにある記述の所を微調整すれば良いと思います。
| 記事No | ： 16475 |
| 投稿日 | ： 2021/04/20(Tue) 16:35:57 |
| タイトル | ： Re^2: スマホ使用時・・・文字が小さい |
| ID情報 | ： ohnishi |
| 投稿者 | ： ohnishi |
| URL | ： http://www.judo.jpn.org/nishimikawa/upgrade/quiz/quiz.cgi |
> > アンドロイドのスマホでWEB QUIZを使っていますが、三択の文字が小さくなって見ずらいです。PCではそのようなことは無いです。
> >
> > 対処方をお教え下さい。
> > （いまのところ、quiz.cgi は全くいじっていないです）
>
> レスポンシブデザインではないので、当たり前の現象だと思います。
> 先ず、tmplフォルダ内にある「HTML」ファイル全てに「viewport」を追加します
> <meta http-equiv="content-type" content="text/html; charset=utf-8" />
> ↑の↓に追加
> <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
>
> 次にquiz.cssファイルに下記を追加
>
> ７８行目にある
> div.btn {
> text-align: right;
> margin-top: 2em !important;
> }
>
> ↑の↓に追加
> /* スマートフォン用 */
> @media screen and (max-width: 480px) {
>
> /* チャレンジフォーム */
> div#chal-box {
> width: 93%;
> margin: 1.5em 0 1.5em -7px;
> padding: 20px;
> -webkit-border-radius: 6px;
> -moz-border-radius: 6px;
> border-radius: 6px;
> -webkit-box-shadow: 0px 1px 10px #666;
> -moz-box-shadow: 0px 1px 10px #666;
> box-shadow: 0px 1px 10px #666;
> border: 1px solid #808080;
> background: #f2f3f9;
> }
> p.nam input {
> width: 250px;
> padding: 8px;
> color: #444;
> border: solid 1px #889fd0;
> -webkit-border-radius: 3px;
> -moz-border-radius: 3px;
> border-radius: 3px;
> -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
> -webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
> box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
> }
>
> }
>
> これで最初に表示される名前を入力するフォームは対応すると思います、
>
> 出題ページは最初の「html」ファイルに追加した「viewport」の記述で
> 問題ないと思います。（とりあえず、iPhone6/7/8では問題無し）
>
> もし、出題画面の文字が小さくて見えないというのであれば、
> quiz.cssファイルでhtmlファイルにあるタグにある記述の所を微調整すれば良いと思います。
HUMMEL様
早急かつ的確ななご回答、有難うございます。
ご教授頂きました通りに実施し、問題解決いたしました。
本当に有難うございました。