レスポンシブ対応、そしてiPhoneでの表示がおかしい件

公開:2017-01-23 21:28
更新:2020-02-15 04:37
カテゴリ:コンテンツの修復と整理

Webサイトのデザインの試行錯誤を続けている。この作業はゴールはない。しいていうと「飽きる」がゴールかな。 デザイン的には徐々にまとまってきている気もする。

しかしレスポンシブ対応というのは面倒な作業である。 デバイスに応じて、最適な解像度・ページ構造・操作方法で動くようにコードを書かなければならないからね。ただ今のところはそこそこ楽しんでやっている。新しい発見がいろいろあるからね。

開発はVS CodeでHTML/CSS/JSのコードを書いて、gulpでビルドしている。CSSのビルドはcssnext、JSはrollupである。プレビューはbrowser-syncで行っている。これは複数のブラウザで操作の同期がとれるという優れモノのツールである。 上の画面のように、デスクトップ、タブレット、スマートフォンの画面サイズで表示してチェックしている。

プレビューでおかしくなければ、GitHub Pagesにプッシュし、iPhoneで表示してみて、崩れないかのチェックをしている。

この「https://github.sfpgmr.net/」も問題がある。カスタムドメインを使っているためHTTP/2化できないのである。これは自サイトで使っているnginx経由にすれば解決できそうだ。これにもチャレンジしたいのだが。。

今日はフッターの右下にボタンを作って、クリックもしくはタップするとスクロールアップしてトップに戻るというコードをd3.jsで書いてみた。一応動くようになったが、この動作をd3.jsで行うにはちょっと工夫が必要だった。

https://bl.ocks.org/humbletim/5507619

で、そのコードを仕込んでiPhoneで動くかチェックしたら、そのコードは動くけど、左上のハンバーガーメニューの左のマージンもしくはパディングが大きく、右側に少しずれていた。今回いじった部分とは関係ないのだが。

プレビューでは正しく表示されているのだが。。

何がおかしいのか今のところよくわからない。この問題はiPhone版Safariでも再現できた。ウェブインスペクターが使えれば原因がはっきりしそうだが、ホストがWin10なのでこれは使えない。XamarinのiPhoneシミュレータだとチェックできそうな気もするが、どうだろうか。

W3C Validatorでテストすると、CSSでエラーが発生していた。svgのfill属性はcss3的にはアウトなのですな。これはしょうがないか。。

あとRSSを出力したり、サイトマップも出力しないとなあ。。