HTML页面是如何适应不同分辨率的显示器

HTML页面何适应不同分辨率的显示器可以通过：响应式布局、自适应网页设计等方法：

1、响应式布局设计：

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

2、自适应网页设计：

自适应网页设计（AdaptiveWebDesign）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

扩展资料：

响应式布局与自适应布局的区别：

1、自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

2、自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。

3、自适应对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。而响应式布局是一套页面全部适应。

4、自适应布局如果屏幕太小会发生内容过于拥挤。而响应式布局正是为了解决这个问题而衍生出的概念，它可以自动识别屏幕宽度并做出相应调整的网页设计。

参考资料来源：百度百科-响应式布局

参考资料来源：百度百科-自适应网页设计

伴随 mac Mojave 发布的系统级别的黑色模式，已经存在很久了。CSS 随之推出了 [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) 的 media 选择器，使得网页能够适配黑色主题。

其中 mode 有如下可能的取值：

以下是来自 MDN 的示例 ：

实际运行效果：

利用 prefers-color-scheme 适配黑色模式的运行效果

webview适配html的方法是通过meta 标签指定屏幕的分辨率。

比如常用写法如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

特殊说明：

这里表示 viewport 的宽度为匹配设备屏幕的宽度，且禁用缩放。涉及到两个概念：

viewport 元素

devicePixelRatio：设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。

由于 iphone 手机和 android 4.0 以上的手机支持修改 viewport 的 width 来改变页面的缩放情况，因此我们可以将 width 指定为页面设计的宽度，如此一来，你的页面正好充满 viewport 并全屏显示，而不会缩放。例如：

<meta name="viewport" content="width=640px, user-scalable=no">

但是对于 android 4.0 以下的手机，不支持设置 viewport 的 width，但是我们可以设置 Android 的另一参数target-densitydpi，从而达到相同的目的，计算 target-densitydpi 的公式如下：

target-densitydpi = UI-width / device-width * window.devicePixelRatio * 160

//UI-width ：WebApp布局宽度

//device-width ：屏幕分辨率宽度

最终的解决方法：

<meta name="viewport" content="target-densitydpi=device-dpi, width=640px, user-scalable=no">

$(function () {

var DEFAULT_WIDTH = 640, // 页面的默认宽度

ua = navigator.userAgent.toLowerCase(), // 根据 user agent 的信息获取浏览器信息

deviceWidth = window.screen.width, // 设备的宽度

devicePixelRatio = window.devicePixelRatio || 1, // 物理像素和设备独立像素的比例，默认为1

targetDensitydpi

// Android4.0以下手机不支持viewport的width，需要设置target-densitydpi

if (ua.indexOf("android") !== -1 &&parseFloat(ua.slice(ua.indexOf("android")+8)) <4) {

targetDensitydpi = DEFAULT_WIDTH / deviceWidth * devicePixelRatio * 160

$('meta[name="viewport"]').attr('content', 'target-densitydpi=' + targetDensitydpi +

', width=device-width, user-scalable=no')

}

// TODO: 其他手机需要特殊处理的在下面

})

---