Question

我在html中使用以下视口元：

元名称=“视图端口” content =“ width = device-width，initial-scale = 1

最适合移动设备使用。但是，在桌面版上，所有资产，字体甚至各种元素的大小都会增加20％。

例如，请参见下图。即使在devtools中将图像定义为300px x 300px，但如果我拍摄屏幕截图并在Photoshop中对其进行测量，则实际上是360px x 360px。

浏览器缩放为100％。我在做什么错了？

/ **编辑** /

因此，我发现Windows将图像和文本的大小设置为默认值的125％。这就是为什么我的网站图像和文字看起来更大的原因。现在我可以看到情况了，如何找到一种解决方法，即使设置为125％，图像和文本也将按预期显示？甚至有可能吗？

Answer 1

最后我解决了。在jQuery中，您可以添加以下内容以使您的网站按预期显示：

struct ContentView: View {
    @State private var showingAlert = false
    var body: some View {
        TabView {
            var str1 = ""
            var fullStr = ""
            Button(action: {
                self.showingAlert = true
                AF.request("https://api-quiz.hype.space/shows/now").responseJSON { response in
                    switch response.result {
                       case .success(let value):
                        let json = JSON(value)
                        debugPrint(json)
                        let dateFormatter = DateFormatter()
                        dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ss.SSSZ"
                        dateFormatter.timeZone = TimeZone(abbreviation: "UTC")
                        let dt = dateFormatter.date(from: json["nextShowTime"].stringValue)
                        dateFormatter.timeZone = TimeZone.current
                        dateFormatter.dateFormat = "MMM d, yyyy h:mm a"
                        let nextGameName = json["upcoming"][0]["nextShowLabel"]["title"].stringValue
                        let tempStr1 = "Next Game: "
                        str1 = tempStr1 + nextGameName
                        let nextGamePrize = json["nextShowPrize"].stringValue
                        let tempStr2 = "Prize: "
                        let str2 = tempStr2 + nextGamePrize
                        let nextGameTime = dateFormatter.string(from: dt!)
                        let tempStr3 = "Date/Time: "
                        let str3 = tempStr3 + nextGameTime
                        fullStr = str2 + "\n" + str3
                    
                    case .failure(let error):
                    print(error)
                    }
                }
            }) {
                Text("Get Info")
            }
            .alert(isPresented: $showingAlert) {
                Alert(title: Text(str1), message: Text(fullStr), dismissButton: .default(Text("OK")))
                    }
             .tabItem {
                Image(systemName: "phone.fill")
                Text("First Tab")
              }
           Text("The content of the second view")
             .tabItem {
                Image(systemName: "tv.fill")
                Text("Second Tab")
              }
        }
    }
}

，然后在CSS文件中有两个类，如下所示：

$(document).ready(function(){
    checkBrowserDpi();
}

function checkBrowserDpi(){ 

    if(window.devicePixelRatio == 1.25 ) {
        $("header, section, footer").removeClass("zoom100");
        $("header, section, footer").addClass("zoom080");
    } else {
        $("header, section, footer").removeClass("zoom080");
        $("header, section, footer").addClass("zoom100");
    }
}

$(window).on('resize', function(){
    checkBrowserDpi();
});

在这种特定情况下，它将在加载文档时以及每次调整窗口大小时检查设备像素比率，然后为桌面浏览器的页眉，节标记和页脚设置正确的缩放比例。您可以将缩放比例设置为所需的任何标签。

**编辑**

正如@ D.Pardal指出的那样，这确实会造成可访问性问题，这是我没有考虑的。就是说，如果您确实想弄乱devicePixelRatio，那么上面的方法就可以了。

Answer 2

问题是CSS px不等于物理像素。定义很复杂，但是在桌面浏览器中，CSS px与物理像素（A.K.A devicePixelRatio）之间的比率等于操作系统的显示比例因子。

这样做是为了适应各种屏幕分辨率及其与观察者的距离。在我的屏幕上，您发送的代码笔中的图像为600x600物理像素，因为我的屏幕是高PPI。我将很难看到以默认大小（以像素为单位）呈现的文本。

如果您真的需要以物理像素设置尺寸，则可以将每个尺寸除以devicePixelRatio，但这会引起可访问性问题。

网站资产在台式机版本上“放大”，但不在移动设备上

2 个答案: