屏幕适配
Posted divtab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了屏幕适配相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置网页编码 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 -->
<meta name="keywords" content="">
<!-- 设置网页描述 -->
<meta name="description" content="">
<!-- 设置网页不能出现缩放效果
width=device-width: 让盒子的宽度与当前设备一样宽,
initial-scale=1; 禁止缩放
禁止用户手动缩放(有些移动设备浏览器,还会支持,有些浏览器不支持)
user-scalable=no
-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Document</title>
<style type="text/css">
*
margin: 0;
padding: 0;
.box
width: 100%;
height: 200px;
background-color: red;
</style>
</head>
<body>
<div class="box">萨达撒旦法撒旦法</div>
<!-- <video></video> -->
<!-- 最理想的网页布局: -->
<!-- 1. 让盒子宽度与设备宽一样 -->
<!-- width: 100%; -->
<!-- 2. 网页布局中不能出现缩放效果 通过 meta标签设置-->
<!-- 总结: 使用流式布局实现页面适配的步骤
1. 保证宽度等于设备宽
width: 100%;
2. 保证页面中不能出现缩放效果
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
-->
</body>
</html>
以上是关于屏幕适配的主要内容，如果未能解决你的问题，请参考以下文章
smallestWidth 限定符适配 : 屏幕适配-插件：ScreenMatch
Android 屏幕适配屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI )