Salesforce Experience SiteでのinnerHeightとinnerWidthの奇妙な動作についての分析と解決策

1. ブラウザの互換性: 異なるブラウザやバージョンでは、innerHeightとinnerWidthの値が異なる場合があります。まずは、問題が発生しているブラウザとバージョンを特定し、公式のドキュメントやリファレンスを確認してください。特定のブラウザに対する対策を見つけることができるかもしれません。

2. ページの読み込みタイミング: innerHeightとinnerWidthの値は、ページの読み込みが完了した後に取得する必要があります。JavaScriptのwindow.onloadイベントやDOMContentLoadedイベントを使用して、ページが完全に読み込まれた後に値を取得するようにしてください。以下に例を示します。

window.addEventListener('DOMContentLoaded', function() {
  var height = window.innerHeight;
  var width = window.innerWidth;
  console.log('Height: ' + height);
  console.log('Width: ' + width);
});

3. レスポンシブデザインの考慮: Salesforce Experience Siteは、レスポンシブデザインに対応している場合があります。画面サイズが変更された場合、innerHeightとinnerWidthの値も変わる可能性があります。このような場合には、ウィンドウのリサイズイベントを監視し、値の変更に対応する必要があります。以下に例を示します。

window.addEventListener('resize', function() {
  var height = window.innerHeight;
  var width = window.innerWidth;
  console.log('Height: ' + height);
  console.log('Width: ' + width);
});

4. ページの要素の読み込みタイミング: innerHeightとinnerWidthの値を取得する前に、ページ内の要素が読み込まれていることを確認してください。特定の要素の読み込みが完了していない場合、値が正しく取得できないことがあります。必要な要素が読み込まれた後に値を取得するようにしてください。