欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何解決前端筆記本屏幕顯示縮放比例125%,150%對頁面布局的影響

 更新時(shí)間：2022年11月16日 11:41:23   作者：superTiger_y  
如果要完整解決該縮放和布局問題,仍需適配,下面這篇文章主要給大家介紹了關(guān)于如何解決前端筆記本屏幕顯示縮放比例125%,150%對頁面布局的影響,需要的朋友可以參考下

發(fā)現(xiàn)問題 

win10默認(rèn)設(shè)置150%,對頁面布局的影響靠單純的自適應(yīng)是沒辦法解決的

問題出在device-pixel-ratio

解決方案一

css解決(復(fù)制粘貼放在樣式文件中,確保被加載)

 
@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
  (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
  (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
  :root {
    font-size: 14px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
  (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
  (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
  :root {
    font-size: 13px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
  (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
  (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
  :root {
    font-size: 12px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
  (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
  (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
  :root {
    font-size: 10px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
  (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
  (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
  :root {
    font-size: 9px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
  (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
  (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
  :root {
    font-size: 8px;
  }
}

解決方案二 

這種方式會將頁面的元素進(jìn)行縮放

js解決(放在入口文件中)

export const detectZoom = () => {
  let ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth;
  }
  if (ratio) {
    ratio = Math.round(ratio * 100);
  }
  return ratio;
};

比如React項(xiàng)目中的app.js

app.js

import { detectZoom } from '@/utils/detectZoom';
// 處理筆記本系統(tǒng)默認(rèn)系統(tǒng)比例為150%帶來的布局影響
const m = detectZoom();
document.body.style.zoom = 100 / Number(m);

補(bǔ)充：什么是媒體查詢中的-device-pixel-ratio

想知道什么是媒體查詢中的-device-pixel-ratio，要先從CSS像素、設(shè)備獨(dú)立像素、設(shè)備像素說起。

概念

CSS像素（CSS Pixel）：適用于web編程，指的是我們在樣式代碼中使用到的邏輯像素，是一個(gè)抽象概念，實(shí)際并不存在

設(shè)備獨(dú)立像素（Device Independent Pixel）：與設(shè)備無關(guān)的邏輯像素，代表可以通過程序控制使用的虛擬像素，是一個(gè)總體概念，包括了CSS像素

設(shè)備像素（Device Pixel）：物理像素，設(shè)備能控制顯示的最小單位，我們常說的1920×1080像素分辨率就是用的設(shè)備像素單位

關(guān)系

因?yàn)樵O(shè)備獨(dú)立像素是包含了CSS像素的大類，所以我們可以直接討論設(shè)備獨(dú)立像素和設(shè)備像素之前的區(qū)別和聯(lián)系。

首先我們可以做一個(gè)總體總結(jié)：

PC端 —— 1個(gè)設(shè)備獨(dú)立像素 = 1個(gè)設(shè)備像素 （在100%，未縮放的情況下，如果縮放到200%可以說1個(gè)設(shè)備獨(dú)立像素 = 2個(gè)設(shè)備像素）

移動(dòng)端 —— 根據(jù)設(shè)備不同有很大的差異，根據(jù) ppi 不同我們可以得到不同的換算關(guān)系，標(biāo)準(zhǔn)屏幕（160ppi）下 1個(gè)設(shè)備獨(dú)立像素 = 1個(gè)設(shè)備像素

在詳細(xì)闡述之前我們先介紹兩個(gè)概念：每英寸像素點(diǎn)ppi 和 設(shè)備像素比dpr

ppi （pixel per inch）：表示每英寸所包含的像素點(diǎn)數(shù)目，數(shù)值越高，說明屏幕能以更高密度顯示圖像

計(jì)算公式——

ppi在120-160之間的手機(jī)被歸為低密度手機(jī)，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（例如蘋果公司的Retina顯示屏）

dpr（device pixel ratio）：設(shè)備像素比，設(shè)備像素/設(shè)備獨(dú)立像素，代表設(shè)備獨(dú)立像素到設(shè)備像素的轉(zhuǎn)換關(guān)系，在JS中可以通過 window.devicePixelRatio 獲取

計(jì)算公式——

知道設(shè)備像素比之后，我們就可以將程序中使用到的CSS像素轉(zhuǎn)換為設(shè)備像素，解決同樣的圖片在不同移動(dòng)終端上顯示存在差異的問題。

常見的設(shè)備dpr可以通過 http://screensiz.es/phone 或者 http://devicepixelratio.com/ 查詢，我們下面來說一說具體的使用方法。

當(dāng)設(shè)備像素比為1:1時(shí)，使用1（1×1）個(gè)設(shè)備像素顯示1個(gè)CSS像素；

當(dāng)設(shè)備像素比為2:1時(shí)，使用4（2×2）個(gè)設(shè)備像素顯示1個(gè)CSS像素；

當(dāng)設(shè)備像素比為3:1時(shí)，使用9（3×3）個(gè)設(shè)備像素顯示1個(gè)CSS像素。

總結(jié)

到此這篇關(guān)于如何解決前端筆記本屏幕顯示縮放比例125%,150%對頁面布局的影響的文章就介紹到這了,更多相關(guān)前端屏幕顯示縮放比例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論