アーティスティックなWebサイトやイケてる関係のサイトによく用いられる「全画面1ページ」のWebサイト
そこそこ新しい仕様なので、僕も扱ってみましたがあまりのスマホとの相性の悪さに驚きました。
Fullpage.js は導入は簡単だが・・・・
全画面サイトでまず使われるのがFullpage.jsというプラグイン。
このプラグインは導入も簡単で、しかもヌルヌル動いて印象が良いのですが
とにかくスマホとの相性が悪かった。
横幅が制限されるスマートフォンのレイアウトにおいては、どうしてもコンテンツの縦幅が長くなる傾向にありますが
全画面ページではその縦幅が「デバイスの縦幅＝1ページ」に限定されてしまいます。
スマートフォン対応のレイアウトと全画面デザインの関係
レスポンシブWebデザイン
デバイスの横幅でレイアウトを切り替える→縦幅は機種によって結構変わってくる（iPhoneXなど従来に比べて縦が異様に長い。）
全画面1ページのWebサイト
ページ毎の縦幅が限定される→レイアウトを切り替えるとコンテンツがページ外にはみ出してしまい、閲覧できない。
PC用のコンテンツ量を横幅をギュッと狭めて文字の大きさはそのままに、しかも縦幅は制限される・・・ということになり詰みます。
ではどうするかというと、コンテンツごとの縦幅を制限してスクロール表示するようにすれば良いのだけど
そこでやっかいなのが先程のFullpage.jsです
Fullpage.js の落とし穴
Fullpage.jsが悪いというか、これは全画面デザインの致命的欠陥かもしれませんが
ページ遷移をスクロールで行うんですよね。
で、先程申し上げた通りはみ出したコンテンツも縦にスクロールする必要がでてくるんですが
ここで調度競合が起こるわけで
スマホだとページ遷移スクロールとコンテンツのスクロール（overflow:autoなど）が競合して、結局コンテンツのスクロールをしようとしても
ページ遷移してしまう。・・・というなんだかわかりませんが、とても使いにくいサイトになってしまいます。
一応Fullpage.jsにはこの現象を避けるために
scrollOverflow.jsというのが用意されているんですが、これもなんだかよくわからない使用感で
詳しくは下記のエントリでも触れられております
僕が実装した感じだとデバイスによって使えたり使えなかったりでした。
FullPage.jsでスクロールが効かないよ！解決法
で、FullPage.jsを使用してしまった結果、overflow:auto;などで設定した縦スクロールがほぼ無効になります
スマホで確認するとスクロールバーもでませんので、ほぼoverflow:hiddenに近い表示となります。
でまあ解決法になっているかどうか微妙なとこですが、
僕の場合はスクロールバーを強制表示させる事にしました。
下記エントリあたりが参考になるかと思います
https://qiita.com/hibikikudo/items/ee1b913479bceddb654c
ただこれも・・・なんというか、あまりオススメできる解決法ではありませんね。
ということで全画面デザインはそもそもあまり手を出さないほうが良いのかもしれません。
Appleのサイトとかも一見全画面デザインの様に見えますが、ずっとスクロールできますからね。