スマホ表示画面(レスポンシブデザイン)について

ブログにPhotoSphereを埋め込みすると、画面をはみ出てしまい見れない状態になるとの事。埋め込みツールを作成した時はChrome,firefox,IEの最新版で表示確認を行い、更にNexus7(2013)で表示確認をやっています。Nexusでの確認はAndroidとしての確認であって、表示サイズでの確認ではありません。ボタンが小さすぎて押せないこともありますが、OSの機能としてボタンをタッチするとその周辺を拡大表示し、ボタンが押し易くなる機能があるのでこれに頼ってます。

このブログに挿入しているPhotoSpere等の画像は基本的に幅600~640ピクセルで埋め込んでいます。PCメインなので、スマホの小さな画面の事は基本的に対応出来ないと言いたいところですが、少しだけ考えてみました。先ずはbloggerのテンプレートでモバイルを生かせば良いのかと思ったら、それでは不十分でPC版テンプレートのHTMLを修正が必要とか書かれているサイトがあるし、ちょっと面倒そうです。

埋め込んだPhotoSpereの上部画面ですが、ここに「Googleマップで見る」があります。ここをクリックするとGoogleマップ上でフル画面で見れるのでここをタップすればいいんじゃないかな。※小さいので押しづらいけどね。もうひとつ、上記画面の右側に全画面表示にするボタンがあります。ここをタップすればGoogleマップに移動せずにフルスクリーンになります。ちょっと問題点はこの右側部分が表示されていないし、画像の部分をスワイプしても枠は動かないので見れないのです。解決方法はブログタイトル部分をスワイプすれば全体がスライド可能です。このボタンも小さいので押しづらいし、拡大画面は空白で押せない問題は生じます。このフルスクリーンボタンが表示されていない時は埋め込みコード(iframe)に追加が必要です。※下記参照

• allowfullscreen="true"     allowfullscreen  ※あちこち見てたらこれだけでいいみたい。

---

ここからはコメントに対する返信です。※建設的なコメントは歓迎します！

※下記埋め込みを500ｘ500にサイズ変更。 スマホを横長で使えば全画面表示ボタンが押せるかも？
※chromeのエミュレータのiPhone5で確認。全画面表示ボタンは見えるし押せる。全画面にした後は縦でも横でも全画面表示可能。終了の「X」をクリックすれば元の表示に戻るのでブログの続きを読めます。

※「Googleマップではこのリンクを開けません」と表示された時は画面右上の「⋮」をタップして、「PC版サイトを見る」を選べば見辛いけど見れますよ。※android 5.1.1のスマホで確認。
マップアプリの「標準設定をクリア」すると使用するアプリを選択可能です。「ストリートビューで開く」を選べば見易くなります。「今回のみ」をタップすれば標準設定されません。※iPhoneは？？？

---