Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support smartphones #1

Merged
merged 10 commits into from
Feb 19, 2022
Merged

Support smartphones #1

merged 10 commits into from
Feb 19, 2022

Conversation

trpfrog
Copy link
Contributor

@trpfrog trpfrog commented Feb 18, 2022

スマートフォンで見やすいようにしました。

修正点

  • 舘名板の一辺の長さが 500px 固定っぽかったので transrate: scale(var(--scale-ratio)) で見た目を --scale-ratio 倍にできるようにしました
    • --scale-ratio は CSS 変数です
    • media query を使って横幅に応じて 0.65 倍, 0.4倍になるようにしています
    • scale を使うと html2canvas がバグるので、変換直前に 1 倍に戻して、変換直後に --scale-ratio 倍に戻るようにしています
      • これが原因で若干ちらつく、対応策が浮かばず……
  • 画面の幅が狭いときに入力フォームが縦に並ぶようにしました
  • iOS から見ると明朝体になるので font に sans-selif を指定しました

デカいプルリクで申し訳ないです

@matchaism matchaism merged commit 7ab0258 into matchaism:main Feb 19, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants