※モバイル機器のみ作動→PC表示に切替 モバイル表示に切替

【Volar】に搭載されてるオリジナル機能に関してはデザインモードではなくデフォルトの編集画面でのご利用を前提としてます。

特に記載がない限り、ご紹介する機能は【Volar】及び【Volarデザイン】に共通搭載となります。

PC&モバイル・レイアウト切り替え機能

キャプチャ画像

iOS13の仕様変更に伴い以前の設定が現状にそぐわなくなったため、仕様を一部変更しました。

 

レスポンシブデザインのホームページというのは、見る機器に応じて自動的に最適なレイアウトデザインで表示してくれます。

 

”レスポンシブデザイン”とは

レスポンシブデザインというのは、PCやスマホ・タブレットなどの画面サイズに応じて自動で見やすい表示に切り替えてくれるデザインのことです。

 

これに対してSIRIUS上位版に付属している「iPhone同時生成機能」というのはPC用とモバイル用に別々のサイトデザインが用意され、見る機器に応じていずれかのサイトデザインが表示されるというものです。

(サイトURLは同じものになります)

 

それぞれにメリットとデメリットがあります。

 

特にスマホやタブレット用に最適化されたモバイルレイアウトはページ表示も早く、余計な部分を後回しにして見やすさを優先したレイアウトになってることが多いです。

 

それゆえスマホやタブレットでサイトを見る人が増えてるのもうなずけます。

 

ただしサイトのジャンルや性質によっては”余計な”部分が実は重要な要素であったり、モバイル上では機能が制限されていてPC用のレイアウトデザインでなければ見ることができない要素もあったりします。

 

また中には”スマホ or タブレット向けのレイアウトデザインが見づらい・気に入らない”という方もいらっしゃいます。

 

そんな方のために、モバイル機器用のOSにはスマホ or タブレット上でもPCと同じレイアウトデザインで一時的に見れる機能が、あることにはあります。

 

ただしその機能は万能ではなく、使い勝手もモバイル機器によってはなかなかスムーズにいかないこともあるようでして。


モバイルでのPCサイト表示の現状

実際、iPhoneのSafariには『デスクトップ用サイトを表示』とか(iOS12以前)、

 

キャプチャ画像

 

AndroidのChromeなら『PC版サイト』というチェック項目があったりします。

(最新のOSバージョンでどうなってるかは知りませんが)

 

キャプチャ画像

 

このうちAndoridの『PC版サイト』は、チェックのON・OFFだけで瞬時にPC版の表示・非表示が切り替えられるのでかなり重宝します。

 

これに対しiPhoneの『デスクトップ用サイトを表示』は、一度PC版のレイアウトに切り替えてしまうとそこからiPhone(スマホ)用レイアウトに戻すことができません

(※iOS11.4で検証時)

 

戻すには”新たにタブを開いて同じURLを貼って開く”などの操作が必要になってきます。

 

しかもiPhoneの場合、Appleのホームページのように、『デスクトップ用サイトを表示』を使っても
PC版レイアウトに切り替わらないサイトもあったりします。

(※Andoridなら問題なし)

iPhoneでは新SIRIUSで作ったサイトもPC版レイアウトに切り替えることができません。

iPhoneのiOS13では『デスクトプ用サイトを表示』がなくなりました。

 

その代わりにURL欄左端のAAマークをタップすると『デスクトップ用webサイトを表示』が出るようになり、そこをクリックすることでPC表示用のレイアウトで表示される仕様に変更されてます。

(本来のモバイル用表示に戻すこともカンタンにできるようになりました)

 

キャプチャ画像

 

ただしすべてのサイトに有効というわけではないようで、たとえばこちらのyahooのようにちゃんとPC用レイアウトに切り替わるものもあれば、見た目が一切変わらないサイトもあります。

 

キャプチャ画像

 

なおSIRIUSで作ったサイトはこれまで同様AAをタップしても(管理人が検証した限りでは)見た目は変わりません

 

そこで【Volar】では、OSの仕様にかかわらずPC用レイアウトと本来のモバイル用レイアウトを交互に切り替えられるボタンを用意しました。

PC or モバイル表示切替ボタンはデフォルトではOFFになってます。

切り替えボタン

PC or モバイル切替機能を有効化すると、ページ上部に専用のボタンが表示されます。

 

たとえば【Volarデザイン】アートレスをiPhone(スマホ)で見た場合はコチラ↓のようなボタンが表示されます。

 

キャプチャ画像

 

当サイトで使用している【Volarデザイン】クールをiPad(タブレット)で表示した場合はコチラ↓。

 

キャプチャ画像

 

※使用するテンプレートによってボタンの位置は微妙に異なります。

(DEMOサイトで位置が確認できます)

 

そしてPCでの表示時と、ボタンタップによるPC用レイアウトに切り替わった表示時はコチラ↓のようなボタン表示に変わります。

 

キャプチャ画像

 

このようにモバイル機器で見てる時は「PC表示に切替」ボタンが表示され、PC表示時と切り替えによるPC用レイアウト表示時は「モバイル表示に切替」ボタンに変化するようになってます。

 

iOS13になってiPhoneやiPadのSafariに「デスクトップ用webサイトを表示」機能が追加されてます。

 

これを「モバイル用webサイトを表示」にすれば、”以前の【Volar】設定”であればPC表示時は切り替えボタンが自動的に非表示になりモバイル機器でしか切り替えボタンが表示されないようになってたんです。

 

しかしながら「デスクトップ用webサイトを表示」にした場合、iPad(タブレット)上で切替ボタンが表示されなくなる現象が確認されました。

 

そのためどちらの設定でも問題なく切り替えボタンが表示されるよう仕様を変更してます。

 

ただし変更後の仕様ではPC用レイアウトでの表示時に”切り替えボタンを隠す”ことが難しくなったため、苦肉の策で先の画像にあるような「※モバイル機器のみ有効」というテキストを表示させるようにしてます。

 

ボタンにマウスを乗っけてもカーソルが指マークに変化することはないのと、ボタンをクリックしたところで何も変わらないので実用上の不都合はないと思ってます。

実際の表示の違い

実際にどんな表示の違いが出るのか、DEMOサイトでもご覧になれますがここで少しだけご紹介しておきます。

 

iPhoneでの表示がコチラ↓だった場合、

キャプチャ画像

 

「PC表示に切替」ボタンをタップするとガラっとレイアウトが変わって下のようにPC用レイアウトで表示されます。

キャプチャ画像

 

そしてiPadでの表示がコチラ↓だった場合、

キャプチャ画像

 

「PC表示に切替」ボタンをクリックすると下のようなPC用レイアウトで表示されます。、

でもiPad(タブレット)上はほとんど見栄えが変わりません。

 

SIRIUSのiPad(タブレット)表示とPC表示は微妙な違いがあるだけで、個人的にはiPad(タブレット)ではPC版と同じレイアウト表示でもいいと思うんですけど…どうなんでしょうね。

 

キャプチャ画像

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア 
キャプチャ画像