526互联

html自适应手机、平板问题

发布时间 2023-10-26 23:21:48作者: Cold的窝

1.1 meta标签：viewport

H5移动端页面自适应普遍使用的方法，理论上讲使用这个标签是可以适应所有尺寸的屏幕的，但是各设备对该标签的解释方式及支持程度不同造成了不能兼容所有浏览器或系统。

viewport 是用户网页的可视区域。翻译为中文可以叫做"视区"。

手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

viewport标签极其属性：

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

每个属性的详细介绍：

属性名 取值 描述
width 正整数 或 device-width 定义视口的宽度 定义视口的宽度，单位为像素
height 正整数 或 device-height 定义视口的高度，单位为像素，一般不用
initial-scale [0.0-10.0] 定义初始缩放值
minimum-scale [0.0-10.0] 定义缩小最小比例，它必须小于或等于maximum-scale设置
maximum-scale [0.0-10.0] 定义放大最大比例，它必须大于或等于minimum-scale设置
user-scalable yes/no 定义是否允许用户手动缩放页面，默认值yes

对了device-width好像是设备视窗宽度的意思，没有详细查询，如有人知道留言，这里就不作注解

1.2 @media

/* 小屏幕手机端 */
@media (min-width: 0px) and (max-width:768px) {
    .div1{
        width: 100px;
        height: 100px;
        background-color: red;
    }
}

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 768px) and (max-width:992px){
    .div1{
        width: 300px;
        height: 300px;
        background-color: blue;
    }
}

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 992px) {
    .div1{
        width: 500px;
        height: 500px;
        background-color: aqua;
    }
}

1.3 文字自动换行

html内容超出了div或p的宽度 让内容自动换行

{
    width: 100%;  
    height: auto;  
    word-wrap:break-word;  
    word-break:break-all;  
    overflow: hidden;  
}

1.3.1 word-wrap


word-wrap: normal|break-word;

normal 只在允许的断字点换行（浏览器保持默认处理，默认值）
break-word 在长单词或 URL 地址内部进行换行。

word-break: normal|break-all|keep-all;

normal 使用浏览器默认的换行规则。（默认值）
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。