移动端高清适配问题

2023-02-25 本文已影响0人 skoll

问题情况 1

1 .普通的png图片放进去出现模糊。可能是setScale的问题
2 .论坛的答案

1 .PNG 是一种光栅格式。通过改变比例（或显示大小，这也会改变比例）来调整游戏中的光栅图像大小，无论采用哪种格式，都会降低其质量
2 .实际上没啥效果

问题情况 2

1 .在电脑上展示是可以的，手机上显示模糊
2 .ios的屏幕比较清楚，const dpi=window.devicePixelRatio||2 ，css像素和设备真实像素比例时1:3,所以相当于电脑上的图片在手机上放大了3倍，所以一定会模糊

3 .解决方法

1 .画布大小要在正常的大小上*window.devicePixelRatio||2 。
2 .这是渲染正常的图片，然后用css把canvas 调小扩大的倍数
canvas{
    // transform: scale(0.3,0.3);
    // transform-origin:0% 0%;
  }
3 .phaser画布宽高的时候乘以设备的devicePixelRatio
4 .phaser初始化时候是可以设置css样式和父级的，将parent设置为你需要展示的大小。canvasStyle设置为width:100%;height:100%即可

h5移动端适配

1 .逻辑像素：在iphone4的时候，手机上把4个像素当做1个像素使用，这样图像在屏幕上看起来更加精致

1 .在pc端，物理像素和逻辑是等比的，所以设置1px这个相对单位长度，实际上展示出来的是绝对单位的长度

2 .物理像素：设备出厂的时候，厂家生产已经决定的实际的点的个数。

1 .也叫屏幕分辨率。一般指一个屏幕实际上是由多少个像素点组成的
2 .如果都使用物理像素就会出现一个问题。21英寸的显示器分辨率是1440*1080,5.1英寸的iphonex 分辨率是2436*1125.如果画一条线长度为20px,如果都以物理像素作为度量单位，那么在显示器上看起来正常，但是手机上就会非常小

3 .设备像素点比

1 .winodow.devicePixelRatio获取
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。

viewport 视口

1 .view port 指的是视口，是浏览器或app或者webview显示的区域，pc端的视口指的是浏览器窗口区域，移动端比较麻烦，会有3个视口
2 .布局视口

1 .meta标签viewport属性改变的视口。
2 .document.documentElement.clientWidth可以获取布局视口的大小

3 .视觉视口

1 .浏览器的可视区域，也就是我们在移动端设备上能够看到的区域。默认和当前浏览器窗口大小相等，当用户对浏览器进行缩放时，不会改变布局视口的大小，但是会改变视觉窗口的大小
2 .window.innerWidth 来获取视觉视口大小

image.png

4 .理想视口

1 .页面无需要缩放，页面的绘制区域就可以完美适配设备宽度的视口大小，不需要出现滚动条就可以正常查看网站的所有内容，并且文字图片清晰
2 .iphone的理想视口是320px,安卓设备的理想视口是320px,360px等
3 .当页面缩放比例是100%的时候，理想视口等于视觉视口
4 .screen.width可以获取理想视口

meta viewport

1 .一般是不设置这个值的。因为超出内容一般都是使用滚动的逻辑

3 .initial-scale:用于执行页面的处世缩放比例，可以配置0.0-10的数字，initial-scale=1表示不进行缩放。用户双指拖放其实操作的就是这个属性

1 .在iphone和ipad上，无论给viewport设置的宽是多少，只要没有设置设置缩放值，iphone和ipad会自动计算这个缩放值，直到当前页面不会出现横向滚动条的时候

4 .maximum-scale:表示用户能够手动放大的最大比例。minimum-scale表示页面缩小的最小比例。一般情况都是不会设置这个值的。
5 .user-scaleble:该属性表示是否允许用户手动进行缩放，可配置no或者yes,当配置成no时，用户讲不能通过手势操作的方式对页面进行缩放