リンクを絶対パス（/style.css など）で記述しても、VS Codeの拡張機能である「Preview on Web Server」を使用すれば、ローカルな環境で確認できるようになったことを書きました。でもスマホからどのように見えるか確認できないなぁ……と思っていました。
ブラウザのFirefoxにはレスポンシブデザインモード（Ctrl+Shift+M)という、スマホやタブレットからどのような見た目になるか表示してくれる機能があります。縦向き（ポートレートモード）だけでなく、横向き（ランドスケープモード）にしたときの見え方も確認できます。実機（iPhone 5s）で確認したところ、縦向きは想定したとおりだったのですが、横向きにしたときに文字が拡大されて表示されるという現象がおきました。これは仕様だそうで、スタイルシートに一部追記（-webkit-text-size-adjust: 100%;）したところ、文字のサイズが変わらずに表示されるようになりました。
レスポンシブデザインモードは便利な機能ですが、必ずしもすべての挙動を再現してくれるわけではないようです。ちゃんと実機でも確認することの大切さを感じました。▲