Home

Blog

Skill

About

フロントエンド環境差分虎の巻

フロントエンド

かれこれ仕事し始めて2ヶ月近くが経っていますが、僕は今SP向けサイトを作っています そんな中でハマった？ことを未来の僕に伝えるためこの記事を残す・・・

環境・端末間差分多すぎぃ！

はい、ご存知の通りSPサイトにおいて考慮しなければいけない点や端末間差分は多いです 環境面や端末面では主に以下に上げるものが代表的ですかね

OS

  • iOS
  • Android

ブラウザ

  • Google Chrome
  • Safari
  • Firefox

こんなもんですね。IEのことはもう忘れました 例えばSafariで一部表示が崩れてる！とかAndroidで動かないとかいう不具合報告がよくきます フロントに携わる人間としてはしょうがないんですが、これでよく僕は疲弊しますほんとに ということでこの記事ではハマったポイントと解決策を書き記していきます

Safariでフォーム要素をタップするとズームされてしまう

で、でた〜〜www これに関してはviewportの設定でなんとかなります

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

ただどうやらa11y的にはよくないようでlinterとか入れてると警告されたりします けど天下のGoogle？Amazon？もこの書き方してるから多少はね・・・ それに普通にピンチすればズームできるので僕は問題ないと思ってます ちなみにNext.js13以下の場合でdocument.tsxに書くとwarn出るのでapp.tsxに書きましょう

Android FirefoxでYoutubeのチャンネルリンクをタップしてもアプリ開いた上でチャンネルに遷移しない

これ地味にハマった Webサイト上でアイコン押下時に特定のチャンネルに飛ばしたい時とか Android FirefoxなのかAndroidのYoutubeアプリが原因かわからないけどハンドルURLをサポートしてない？っぽくて@つきのURLだとダメみたい なのでsrcに設定するURLをIDに基づくURLにしましょう

// NG
https://youtube.com/channel/@hogehoge
// OK
https://youtube.com/channel/UCUZHFZ9jIKrLroW8LcyJEQQ

Safariで自動再生されない

仕様です ユーザのアクション起因で音声を再生させるようにUI・UX周りをPdMやデザイナーと調整しましょう 例）ボタンタップ時に再生する...etc

Android FirefoxでInput要素内で漢字変換されない

Enter時に各処理を走らせるような実装の場合、これにぶち当たる可能性が高いです ただこれライブラリによっては再現しないかも（自分の場合、MUIを使用していた 確かonCompositionEndがAndroid Firefoxだとうまく動かない？のでnativeEventを使うようにしましょう

const InputComponent = (props: Props) => {
  const [word, setWord] = useState('');
  // いらない
  const [isComposing, setIsComposing] = useState(false);


  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    // NG
    if (e.key !== 'Enter' || isComposing) {
      return;
    }
    // OK👍
    if (e.key !== 'Enter' || e.nativeEvent.isComposing) {
      return;
    }
    // なんらかの処理
  };


  return (
    <Input
      value={word}
      onChange={e => setWord(e.target.value)}
      onKeyDown={onKeyDown}
      // いらない
      onCompositionStart={() => setIsComposing(true)}
      onCompositionEnd={() => setIsComposing(false)}
      {...props}
    />
  );
};

iOS Safariでモーダルの背面がスクロールできてしまう

これ結構できてしまうサイトに出会ったりします ただ実装者が悪いんじゃなくてこれもはやSafariが悪いだろ・・・ 前プロジェクトで一緒になった人が言ってたけど「Safariはオシャレ気取ったIE」とはよく言ったもの Safariのスクロール時に画面内のURLを表示しているタブが縮小化するのが原因と思ってます Googleで検索すると対処法でみなさんよく頑張っているのがわかるんですが、Reactはライブラリが豊富なのでそれにあやかりましょう

これで解決です 注意点としてはモーダルをkeepMountedにしているとページがスクロールできなくなります😇

とりあえずはこんなものかな また気が向いたら書きます

僕のDiscordのBotが逝きました

ニートの終わり

©︎ 2023 ほし☆まて