大前端

网页大屏展示适配方法

2023-01-03  本文已影响0人  jack钱

按照设计图1920*1080的比例进行正常开发,开发完成后,加入如下代码:
在页面加载时设置一下页面的meta标签,调整比例
比例按照 当前浏览器宽度/设计图宽度 的比例进行设置

const setZoom = () => {
  let viewport = document.createElement('meta');
  viewport.setAttribute('name', 'viewport');
  viewport.setAttribute(
      'content',
      `width=device-width,initial-scale= ${document.documentElement.clientWidth / 1920}`,
  );
  document.head.appendChild(viewport);
};

useEffect(() => {
setZoom();
}, []);
上一篇 下一篇

猜你喜欢

热点阅读