HTML5の再適応スキームとビューポート適応の問題点を解説

@media screen and (min-width: 320px) {
  html {
    font-size: 32px;
  }
}
@media screen and (min-width: 375px) {
  html {
    font-size: 37.5px;
  }
}
@media screen and (min-width: 414px) {
  html {
    font-size: 41.4px;
  }
}
@media screen and (min-width: 750px) {
  html {
    font-size: 75px;
  }
}

<script>
  // Adjust the fontsize of the html according to the screen size
  function setHtmlFontSize() {
    const width = document.documentElement.clientWidth;
    document.documentElement.style.fontSize = width / 10 + "px";
  }
  // Initialize
  setHtmlFontSize();
  // Listen for screen size change events
  window.addEventListener("resize", setHtmlFontSize);
  // listen to the screen flip event
  window.addEventListener("orientationchange", setHtmlFontSize);
</script>

// Define the width of the design to be 375
const DESIGN_WIDTH = 375;
//meets mobile adaptation by setting the initial-scale value of the content in the meta element
const setViewport = function () {
  // calculate the width of the current screen and the design scale
  let scale = window.screen.width / DESIGN_WIDTH;
  // Get the element
  let meta = document.querySelector("meta[name=viewport]");
  let content = `width=${DESIGN_WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`;
  // determine if it already exists
  if (!meta) {
    meta = document.createElement("meta");
    meta.setAttribute("name", "viewport");
    document.head.appendChild(meta);
  }
  meta.setAttribute("content", content);
};
setViewport();
// Listen for screen change events
window.addEventListener("resize", setViewport);
// listen to the screen flip event
window.addEventListener("orientationchange", setViewport);