# large-screen-problem-record

**Repository Path**: zhouhuafei/large-screen-problem-record

## Basic Information

- **Project Name**: large-screen-problem-record
- **Description**: large-screen-problem-record
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-02-15
- **Last Updated**: 2023-02-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 大屏上的页面是使用vw单位进行的自适应布局！但是公告图中的文字在大屏上却无法清晰展示！这是为何？
> 大屏上的页面，是使用file协议，跑在本地的纯静态页面。
#### 名词说明
* 图片：下文图片指的是位图而非矢量图（矢量图缩放不会失真），且建立在页面是自适应页面的前提下（自适应页面会等比缩放）。
* 分辨率：若无特指的情况下，下文分辨率指的都是物理分辨率，即设备支持的最大分辨率。
* 使用的分辨率：指的是逻辑分辨率，例如屏幕最大可以支持3840的分辨率，你偏偏要使用1920的分辨率，那么这个1920的分辨率就是逻辑分辨率。
#### 问题1：公告图不清晰
> 此时设计图使用的尺寸是`3840*2160`。
* 问题以及原因：公告图不清晰，是因为公告图占用的区域小，等同于公告图被缩小，缩小后文字更小了，自然是看不清的，需要更换排版。
* 方案以及建议：建议psd按照大屏的分辨率进行尺寸设计，然后将整张psd切成一整张图，然后全屏观察这张图，如果在自己的设备上看不清，那么在大屏上观看大概率也是看不清的。
* 通俗一点解释：想要看清一块本身不糊的内容，要么是这块内容本身就很大（让公告占用更大的区域），要么是你使用放大镜去观察（使用更大的屏幕/更高的分辨率/更贵的设备）。
#### 问题2：轮播卡顿
> 此时设计图使用的尺寸是`9000*5062`。
* 为了解决公告图不清晰的问题，最初的解决方案是对设计图进行了尺寸升级，但是问题依旧。
* 想要让公告图文字清晰，则需要放大文字，即增大公告图的占用区域，所以需要进行重新排版，但是修改排版后，设计图却没有回归到`3840*2160`尺寸。
* 基于`9000*5062`的尺寸进行切图，即使压缩后（单张背景图也在2M左右，单张公告图也在800KB左右，所有轮播图加一起将近20M），轮播跑起来也很费劲，卡顿加白屏，一点也不丝滑。
* 我把设计图的尺寸等比缩小到`3840*2160`（背景图）和`4500*2531`（公告图）后，进行重新切图并压缩（压缩后单张背景图不超过800KB，单张公告图不超过300KB，所有轮播图加一起不超过4M），才保障了轮播的丝滑，页面也并没有变的模糊。
* 就这还是有些设备会带不动。后续我又把单张超过400KB且容易拆分的背景图进行了更细致的切割以及压缩。争取适配更多性能稍差的设备。最终，所有轮播图加一起不超过3M。此时已经非常丝滑了。若是继续细化，需要更多的时间。
* 总之就是建议单张banner图或公告图或背景图不要超过300KB。能控制在100KB以内最好。
#### 设计图的尺寸应该怎么设计？
* 设计图应该根据屏幕的分辨率进行设计，尺寸保持和设备的分辨率一致即可。MacBook Pro有些特殊，应按照渲染分辨率的尺寸进行设计。
* 大图可以适配小屏，但是需要注意图片上的文字等比缩小后是否依然清晰可见。
#### 图片特性？
* 图片等比放大会模糊。
* 图片等比缩小不会模糊。但是缩的太小又会导致肉眼无法识别。例如图片上的字本来就很小，缩小后自然会导致肉眼无法识别。
* 图片非等比缩放会变形。
#### h5页面怎么出设计图？
* 设计h5页面时，通常是出宽度为375px的设计图，但是使用图片时，我们都是使用2倍图或3倍图，这样做的目的是为了保障图片在更高分辨率的屏幕上也能清晰显示。例如苹果手机的屏幕。
* 苹果手机的屏幕，分辨率更高，相当于放大了图片，如果不使用高倍图，那么当图片被放大到超过原始宽高后就会模糊。
* 问：使用的图片倍数越高，能适配的分辨率上限就越高，那为什么我们通常都是使用2倍图或3倍图而不使用更高倍数的图？
* 答：图片倍数越高，图片越大，渲染图片时就需要消耗更多的系统性能，手机就会越卡。为了保持性能均衡，页面丝滑，固采用2倍图或3倍图，而不是采用更高倍数的图。且3倍图已足以适配市面上绝大多数的手机屏幕。
* 在375px的设计图上，文字最小不能超过12px（浏览器限制）。所以，如果你出的是750px的设计图（2倍图），那需要注意文字的大小，不要小于24px（12*2）。否则等比缩小到375px后，文字不一定能看清。
* 如果你想适配更高的分辨率，那么文字也要等比放大到对应的倍数。
#### pc页面怎么出设计图？
* 设计pc页面时，通常是出宽度为1920px的设计图。如果想要在更高的分辨率屏幕上让图片清晰可见，同理，也需要使用更高倍数的图片。
* 拿当前这个`3840*2160`分辨率的大屏来说，设计图按照`3840*2160`尺寸进行设计即可。
* 在1920px的设计图上，文字最小不能超过12px（浏览器限制）。所以，如果你出的是3840px的设计图（2倍图），那需要注意文字的大小，不要小于24px（12*2）。否则等比缩小到1920px后，文字不一定能看清。
* 如果你想适配更高的分辨率，那么文字也要等比放大到对应的倍数。
#### 设备物理像素比
* 设备物理像素比（简称dpr） = 设备物理像素 / 设备独立像素
  - 设备物理像素：屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位pt。也称为物理分辨率。也是屏幕支持的最大分辨率。
  - 设备独立像素：设备独立像素和设备使用的分辨率有关，当设备使用的分辨率发生变化，则设备的独立像素也会发生变化。也称为逻辑分辨率。也是设备当前正在使用的分辨率。
  - 使用`window.devicePixelRatio`获取屏幕的设备物理像素比。
#### 数据记录
> 记录公告图的清晰度，公告图是使用4500*2531尺寸设计图进行的切图。
* 我的大屏物理分辨率是：`3840*2160`。`27`英寸。`4K`屏幕。
  - 大屏接入的电脑不同，使用的分辨率不同，使用的缩放比例不同，则网页的宽度不同，dpr不同。清晰度不同。
* 我家里MacBook Pro笔记本的屏幕物理分辨率是：`2560*1600`。网页宽度是`1440px`。dpr是`2`。
  - MacBook Pro虽然默认使用的分辨率是`1440*900`，但其实它渲染时的渲染分辨率是`2880*1800`。
    - 最后将这`2880x1800`的图像缩放到`2560x1600`（屏幕物理分辨率）并显示在屏幕上。
    - 所以设计MacBook Pro的网页时，设计图应该按照渲染分辨率的尺寸进行设计。也就是按照`2880x1800`的尺寸进行设计。
    - 如果是按照1440*900出设计图，那图片部分就需要使用2倍图，才能保障图片的高清显示。
  - 外接我的大屏后，大屏默认使用的分辨率是`3840*2160`。网页宽度是`1920px`。dpr是`2`。此时公告图在小屏上超级清晰，在大屏上也超级清晰。
* 我家里ThinkPad笔记本的屏幕物理分辨率是：`1920*1080`。网页宽度是`1280px`。dpr是`1.5`。
  - 电脑的显示设置中，默认缩放是150%。当我把缩放改为100%后，网页宽度是`1920px`。dpr是`1`。
  - 外接我的大屏后，大屏默认使用的分辨率是`1920*1080`，默认缩放为150%，网页宽度是`1280px`。dpr是`1.5`。此时公告图的文字在小屏上不清晰，在大屏上也不清晰。
  - 外接我的大屏后，手动将大屏使用的分辨率改为`3840*2160`，默认缩放为150%，网页宽度是`2560px`。dpr是`1.5`。此时公告图的文字在小屏上不清晰，在大屏上超级清晰。
  - 外接大屏时，不管选择的是`复制这些显示器`，还是选择的是`扩展这些显示器`，都可以手动进行分辨率的修改。当大屏使用3840分辨率时公告图清晰是因为文字大小刚好合适，1920不清晰是因为文字被过度缩小。
* 我公司DELL台式机的屏幕物理分辨率是：`2560*1440`。网页宽度是`2560px`。dpr是`1`。
  - 未外接大屏。公告图在屏幕上显示时，比ThinkPad小屏清晰，没MacBook Pro小屏清晰。
* 规律：1920分辨率时，公告图文字最糊。3840分辨率时，公告图文字最清晰。
* 总结：再不超过psd尺寸的前提下，屏幕越大，分辨率越高，公告图文字越清晰。
* 推测：当屏幕分辨率大于4500*2531后，公告图文字又会开始变模糊。此条结论我已懒得进行验证，因这点符合图片被放大到超过原始宽高后就会变糊的特性。
#### 最后两问
* 问：为啥在1920的分辨率上，公告图中的文字不清晰？
  - 想要在1920的分辨率上清晰展示一个文字，则文字至少需要是12px（浏览器限制）。
  - 等比放大到9000尺寸的设计图上时，这个文字大小至少需要56px（9000*12/1920约等于56）。
  - 如此，等比缩小到1920时，文字才不会因为过分缩小，而导致看不清。
  - 然而尺寸为9000的设计图上其公告中的文字只有46px。其实还是公告图上的文字小了。
* 问：为啥在2560的分辨率上，公告图中的文字清晰？
  - 想要在2560的分辨率上清晰展示一个文字，则文字至少需要是12px（浏览器限制）。
  - 等比放大到9000尺寸的设计图上时，这个文字大小至少需要42px（9000*12/2560约等于42）。
  - 如此，等比缩小到2560时，文字才不会因为过分缩小，而导致看不清。
  - 此时尺寸为9000的设计图上其公告中的文字高达46px。自然是能够清晰展示的。
  - 同理，当投屏到3840的分辨率上时，9000尺寸的设计图，其文字最小只需要控制在28px（9000*12/3840约等于28）。
#### 最后的建议
* 大屏是`3840*2160`的分辨率，则设计图的尺寸建议也按照`3840*2160`的尺寸进行设计。
* 如果需要能在`1920*1080`的屏幕上清晰展示，则在`3840*2160`尺寸的设计图中，文字最小需要控制在24px。
#### 最稳妥的大屏设计方案
* 设计图的宽度：屏幕的宽度*dpr
* 设计图的高度：屏幕的高度*dpr
* 文字的大小：在网页上，使用font-size设置文字大小时，最小只能控制到12px（浏览器限制）。如果小屏只需兼容到`1920*1080`的分辨率，那么在`3840*2160`尺寸的设计图上，文字最小不能小于24px。
#### 使用手册
* https://docs.qq.com/doc/DWERtanFJenBxamti