[
[返信する]]
スマホで名前変換をする時
by 相良
2019-07-07 02:45
フォームを選択するとページが少し拡大するように
動いたりするじゃないですか
あれが動かないように、固定(？)されたまま
名前変換をしたいのですが……
何かタグはあるのでしょうか？
色々探したのですが見つからなかったので、
もしありましたら何のタグを入れるのか教えて下さい
分かりづらかったら申し訳ありません
詳しい方よろしくお願いします……。
pc
[編集]
by 774
2019-07-07 03:33
お使いの端末がiosなら、入力欄のフォントサイズが16px以下なのが原因と思われます。
フォントサイズが一定以下だと端末側で見づらいと判断し、勝手に拡大するようです。
下記二種類どちらかで対応できるので試してみてください。
解決しない場合は以下の書き出しをお願いします。
・使用端末
・使用ブラウザ
・該当機能のhead内
・該当機能のレイアウト
【方法１】
head内上部に以下を追加
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
▽解説
ざっくばらんに言うと閲覧者側でのズーム等の操作を禁止する宣言です。
最近だとユーザビリティの観点から指定非推奨、ios10や一部ブラウザでは無視される事もあり、あまりお勧めはしません。
【方法２】
head内<style type="text/css"></style>間に以下を追加
textarea ,input[type="text"] {
font-size: 16px !important;
}
▽解説
入力欄のフォントサイズをズーム不要のサイズにしているだけです。
▽pc閲覧時等に影響を及ぼしたくない場合
振り分け独自タグを使うなど工夫してください。
▽小さいフォントサイズを使用したい場合
{}間に以下を追加してください。
transform: scale(0.9);
入力欄自体を縮小表示させる指定です。幅や枠線等も一緒に縮小されるので、そのあたりはうまいこと調整してください。
0.9部分で縮小倍率を決定します。
pc
[編集]
by 相良
2019-07-07 18:08
と言うことは方法２の方が確実に設定されるのでしょうか？
一応こんな感じで追加してみたんですけど、
ここの部分だけで大丈夫ですかね
/* 入力フォーム基本 */
textarea ,input[type="text"] {font-size: 16px !important;transform: scale(0.9);}
input[type=text],textarea,input[type=submit]{
font-family: "Dosis" ,"游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
-webkit-appearance: none;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
vertical-align:middle;
position:relative;
top:-1px;
}
/* 入力フォーム 色指定 */
input[type=text],textarea{
/* 背景色（全て指定） */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
background-image: -webkit-linear-gradient(left, #fff, #fff);
background-color: #fff;
color: #000;
border: 1px solid #000;
vertical-align: middle;
position: relative;
}
/* INFOページ サイトURL表記用 */
textarea.siteURL{
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#f0f0f0));
background-image: -webkit-linear-gradient(left, #f0f0f0, #f0f0f0 );
background-color: #f0f0f0;
color: #000;
border: 0;
width:90%;
height: 16px;
margin-top: 8px;
}
/* 色味指定（ボタン）*/
input[type=submit]{
/* 背景色 */
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff));
background-image: -webkit-linear-gradient(left, #fff, #fff);
background-color: #fff;
color: #000;
border:solid 1px #000;
}
/* 入力フォーム サイズ */
input[type=text]{
width:60px; /* 長さ */
height: 23px; /* 高さ */
padding:0 0px; /* 文字余白 */
text-align: center;
margin-right: 4px; /* 余白 */
top:-1px;
}
/* ボタン サイズ */
input[type=submit]{
vertical-align:middle;
position:relative;
width: 40px; /* 長さ */
height:25px; /* 高さ */
padding:0 2px; /* 文字余白 */
}
pc
[編集]
by 774
2019-07-08 02:17
それで本題が解消されているようなら問題はないと思います。
解決していない場合は前述した情報の提示をお願いします。
同一指定を複数回していたり意味のない指定があったりで無駄が多いので、削った方が何かと楽かもしれません。
【例】
/* 入力フォーム基本 */
textarea ,input[type="text"] ,input[type="submit"] {
font-family: "Dosis" ,"游明朝", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
-webkit-appearance: none;
border-radius: 0;
border: solid 1px #000000;/* 枠線 */
background-image: none;
background-color: #ffffff;/* 背景色 */
color: #000000;/* 文字色 */
vertical-align: middle;
position: relative;
top: -1px;
}
/* 入力欄設定 */
textarea ,input[type="text"] {
font-size: 16px;
transform: scale(0.9);
}
/* INFOページ サイトURL表記用 */
textarea.siteURL {
background-color: #f0f0f0;/* 背景色 */
border: none;
width: 90%;
height: 16px;
margin-top: 8px;
}
/* 一行入力欄 */
input[type="text"] {
width: 60px;/* 幅 */
height: 23px;/* 高さ */
padding: 0;/* 内余白 */
margin-right: 4px;/* 外余白_右 */
text-align: center;
}
/* ボタン */
input[type="submit"] {
width: auto;
min-width: 40px;/* 最小幅 */
height: 25px;/* 高さ */
padding: 0 2px;/* 内余白 */
}
pc
[編集]
by 相良
2019-07-08 12:58
わざわざご丁寧にありがとうございました！
とても助かりました！
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2019-07-07 02:45
pc
戻る
]