サポート
フォーム管理プラグインのスマホ版について
鈴木康広 (2016/03/11 15:12)
設置URL ： http://www.nishi-shinjuku.net/
確認用のモーダルウィンドウがスマホの画面より長くなった場合にスクロールバーが出ません。
パソコンのデバックモードではスクロールバーが出ているので何が原因かも皆目見当が付きません。
どこをどう変更すればスクロールして戻るボタン、送信ボタンをタップする事が出来るのでしょうか？
ミツ (2016/03/15 03:29)
URL ： http://32877.xii.jp
こんにちは。
フォームプラグインの確認画面は、jquery.subwindow.jsを利用してiframeで表示されています。
jquery.subwindow.jsのトリガーになっているのが、[freo/js/plugins/form.js]です。
[freo/js/plugins/form.js]の136行目・137行目が
width: 600,
height: 600,
になっていますが、スマートフォンにも対応したいなら、ここを
width: 300,
height: 300,のようにすればよいのではないでしょうか。
ミツ (2016/03/15 03:33)
URL ： http://32877.xii.jp
また、スマホブラウザでのiframeの表示について少し検索したところ、
iPhoneでもiframeを使ってスクロールさせて、かつ、PCとも外観を揃える方法
http://qiita.com/Shoesk/items/9f81ef1fd7b3a0b516b7
スマホサイトなどでiframe要素をスクロールさせる方法
http://qiita.com/takuhou/items/904290fa0c8c60b25af1
などが出てきたので、[freo/js/plugins/form.js]の設定を動かさずにCSSやjavascirptで補ってあげても良いと思います。
鈴木康広 (2016/03/15 18:25)
URL ： http://www.nishi-shinjuku.net/
テストURLです。
iPhoneのみテスト出来ます。
http://www.ec-cube-seo.com/index.php/form/contact
form.jsを使って画面領域は調整済みです。
jquery.subwindow.cssでoverflow: auto;としてスクロールバーが出るようになっているのも判ります。
しかし、実際にはブラウザのエミュレートモードではスクロールして実機ではスクロールしません。
cssとjavascriptをどの様にすれば良いのか皆目見当が付きません。
ccc (2016/03/16 00:22)
URL ： http://cccabinet.jpn.org/
cssとjavascriptをどの様にすれば良いのか皆目見当が付きません。
ちなみサブウィンドウの部分のHTMLソースは以下のとおりとなります。変更したい場合はjquery.subwindow.jsをゴニョゴニョします。
<div id="subwindow" style="display: none;">
<div id="subwindow_overlay"></div>
<div id="subwindow_foundation" style="margin-top: -300px; margin-left: -300px;">
<div id="subwindow_title">メール送信フォーム</div>
<div id="subwindow_close">×</div>
<iframe id="subwindow_content" width="600" height="600" frameborder="0" style="display:block;" name="subwindow_content" src="/?__subwindow=0.9312930328591068">
～（freo/templates/plugins/form/preview.htmlが表示）～
</iframe>
</div>
</div>jquery.subwindow.jsとjquery.subwindow.cssでいろいろ試行錯誤してみたのですが、#subwindow_foundationがposition: fixed;ということもあるのか、どうしても-webkit-overflow-scrolling:touch;が認識されないせいみたいで、iOSではスクロールができない模様です(^_^;)
当方はiPhone持ってないのでiPadで試した結果ですが。
Androidスマホでは画面の大きさを調整すれば問題がなくスクロールできるんですけどね...
※サブウィンドウの部分のHTMLとCSSの認識を確認はfirefoxのfirebugを使用します。使用する際にはフォームから一旦サブウィンドウ表示させた後ウインドウを閉じてそのフォームのページでf12を押して要素を調査するとソースの下の方に薄っすらと表示されます。
こんな程度しかお役に立てず申し訳ありません。
鈴木康広 (2016/04/04 13:56)
URL ： http://www.nishi-shinjuku.net/
どうしてもモーダルウィンドウでは解決出来ませんでした。
なのでform.jpでモーダルウィンドウを開くのでは無くリンクにして画面遷移させて対処しました。
ちょっと格好悪いですけど仕方ないですよね。
テストURLです。
iPhoneのみテスト出来ます。
http://www.ec-cube-seo.com/index.php/form/contact
何か他の手がありますか？
返信
- この記事に返信します。
- 返信の際は、設置URL以外の項目は入力必須です。