更改視口硬件像素縮放

如何使我的瀏覽器（chrome 44.0.2403.155 m）的內容像素與我的物理屏幕（便攜式計算機）的像素一致？更改視口硬件像素縮放

我完全不熟悉前端開發，並且在花費數小時生成特定像素大小的圖像後，我們痛苦地發現，瀏覽器屏幕上的（虛擬像素）像素與我的像素不一致物理屏幕硬件。有很多關於響應式設計的材料，但沒有用戶體驗的考慮就是在做我正在做的事情。我需要的是我的瀏覽器中的像素與我屏幕上的像素一致。

我都嘗試 <meta name="viewport" content="width=1920">（1920px是我的屏幕的寬度）和 <meta name="viewport" content="width=device-width, initial-scale=1.0"> ，但我看不出有什麼變化，即使是在我與這些數字玩（不僅是視meta標籤用於移動設備？）。我還了解到，存在window.screen對象，並且window.screen.height和window.screen.width但它們是隻讀的。

來源

2015-08-15 Katerl3s

一個很好的嘗試追索的東西很多，我發現answe後R：我爲什麼不爲1的理由：我的瀏覽器的像素和我的物理屏幕的像素之間1的比例是，我的Windows 10被設置爲擴展的一切：

採取這種X％設置，瀏覽器將它的屏幕的寬度

(Physical Screen Width)/X%

在我而言，這是1920px/150% = 1280px

改變這一SE後達到100％，我在瀏覽器和屏幕像素之間獲得了1對1的對應關係。

我還在StackOverflow中發現，此視口元標記不會影響非移動（臺式機，筆記本電腦......）設備瀏覽器。不過，我想我已經在官方文件中找到了這個答案。

Does Viewport affect desktop browsers?

How do desktop browsers handle mobile meta tags?

來源

2015-08-15 15:47:01 Katerl3s

使您的網站規模與您的瀏覽器，你應該用如下命令

<link rel="stylesheet" type="text/css" href="css/index CSS.css">

HTML文檔鏈接到一個CSS文件在這種情況下，我的CSS文件的標題是指數CSS.css

然後在css文件中寫入

background-size:100%; 
background-repeat: no-repeat; 
width:100%; 
height:100%;

您的網站應該與您的瀏覽器窗口會自動縮放。

我相信視窗meta標籤原本只適用於移動設備，因爲在HTML中使用HTML代碼來創建基本信息例如：

<html> 
<head> 
<title>hello world</title> 
</head> 
<body> 
this is my website 
</body> 
</html>

然後使用CSS風格你的網站，並插入一個背景，定位你的網站，位置文本等

這裏是視 make your website more mobile friendly

來源

2015-08-15 04:13:06

更改視口硬件像素縮放

回答

相關問題