PAY.JPの携帯サイズへレスポンシブする方法【カード入力画面】

Question

###知りたいこと
Pay.jpで決済システムを導入しました。導入は終わりましたが、携帯からアクセスした場合、支払うボタンとクレジットカードの入力画面が非常に小さいです。これらを携帯画面用にサイズを大きくしたいです。

<%= form_with local: true, url: products_pay_path do |form| %>
  <script
    type="text/javascript"
    src="https://checkout.pay.jp"
    class="payjp-button"
    data-key="<%= ENV["PAYJP_PUBLIC_KEY"] %>">
  </script>
<% end %>

携帯サイズで開いた場合、

現状としては、レスポンシブで携帯からのアクセスの場合、new.html.erbへリンクする新たなボタンを作成し、new.html.erbページでクレジットカードを登録する方法を考えているのですが、
単純に、デザインを携帯用の大きさに変更することは可能でしょうか？
ご教示頂ければ幸いです。

Comments

[no1knows]

ビューポートの設定は完了済みでしょうか？

[tomtom1]

ご回答ありがとうございます！
<meta name="viewport" content="width=device-width, initial-scale=1.0">
↑こちらですね。未設定でした。application.html.erbに設定しましたら、ボタンと入力画面が携帯サイズになりました。
しかし、今までviewportを設定せずに、メディアクエリで携帯サイズの設定をしていたため、他のデザインが巨大化してしまいました。viewport設定の上、メディアクエリで設定した再度全てのcssを書き換えないといけないと思いますが、莫大な量になってしまいます。何か対策として、入力画面のみに適応させる方法など何か良い案があればお教え頂ければ幸いです。

Answer 1

何か対策として、入力画面のみに適応させる方法など何か良い案があればお教え頂ければ幸いです。

pay.jpについての知見はありませんが、下記の様なアプローチなら実現可能かもしれません。

1. スマホ表示でクレジットカード入力画面を開く
2. ブラウザの開発者ツールを開く
3. pay.jpのCSSを探す
4. pay.jpのCSSファイルを表示させる
5. pay.jpのCSSファイルの内容をすべてRails側にコピペ
6. mediaqueryでpay.jpのCSSでファイルを使ったり使わなかったりする

Comments

[tomtom1]

ありがとうございます。
<meta name="viewport" content="width=device-width, initial-scale=1.0">を追加し、解決しました。
追加したことによるデザイン崩れについてはお答え頂いた内容を参考にさせて頂きます。まだデザインについては解決していませんが、取り急ぎ、ありがとうございます。