質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

361閲覧

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

tomtom1

総合スコア168

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2020/10/23 10:44

###知りたいこと
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ページでクレジットカードを登録する方法を考えているのですが、
単純に、デザインを携帯用の大きさに変更することは可能でしょうか?
ご教示頂ければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

no1knows

2020/10/23 11:37

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

2020/10/23 22:09 編集

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

回答1

0

ベストアンサー

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

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

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

投稿2020/10/24 09:55

no1knows

総合スコア3365

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomtom1

2020/10/26 12:30 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問