[
[返信する]]
スマホ向けフォームデザイン
by 匿名
2021-01-10 12:16
ナノではスマホ向けデフォルトCSSがあるとのこと、過去の掲示板で拝見しました。
▽出力されるCSSファイルurl
http://nanos.jp/static/css/smartphone/common.css
PCでの表示は自身で入力したcssで表示されるため問題ありませんが、スマホから閲覧するとフォーム関係のレイアウトが崩れるてしまいます。これがすごく嫌です。このデフォルトcssは削除できないのでしょうか？
できなければ、ボタンの大きさ、高さ、背景色など自身の書いたcssを優先させるにはどのような指定をかければいいのか教えていただけると幸甚です。
pc
[編集]
by 匿名
2021-01-10 20:22
削除できないので上書きするしかないです。
そのURLにアクセスすれば中身を見れますからフォーム関連のcssを抜き出してきて、要素とプロパティを変えずに値だけまるっと上書きするか、リセットcssを書いて後でお好きなcssを書くか、で解決すると思います。
他の端末に反映させたくないときはスマホ用の端末振り分け独自タグで囲んでください。
pc
[編集]
by 774
2021-01-11 02:32
<smartphone>
<script>
document.querySelector('link[href="/static/css/smartphone/common.css"]').remove();
</script>
</smartphone>
HEADに上記でscript有効環境なら無効にできます。
ブラウザによってはプレビューでscript無効になったりエラーになるのでその点のみ注意を。
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=2055&viewType=thread
pc
[編集]
by 匿名
2021-01-11 17:22
>匿名様、774様
ご教授ありがとうございます。774様の書いてくださった内容でHEADに追記したところ、自身の記述したCSSでスマホからも閲覧できました。
全てのFORM関係のCSSにbackgroun noneなど追記しないといけないのかと、あたまを抱えていたので大変助かりました。
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2021-01-10 12:16
pc
戻る
]