zoukankan      html  css  js  c++  java
  • html的适配

    html值得一说的应该就是适配

    !!适配是与手机同时存在的

    写好一个页面在手机端打开,会发现这个页面显示很小,那是因为设备的视口宽度viewport不等于设备宽度device-width,而页面是根据视口宽度显示的,一般来说一个手机的视口宽度是980px,而设备宽度是350px

    如果测量手机的视口宽度呢,写一个红色背景颜色的宽度为980px的div和一个红色背景颜色的宽度为350px的div,在电脑打开,然后点击手机调试,会发现980px的div大概占满,而350px的只有三分之一

    也就是说你在一个350px看一个980px的页面,当然会看起来很小了,还有就是这些年的手机更新换代有了2倍像素,3倍像素的屏幕,但其实设备宽度是没变的

    如何让视口等于设备宽度,写一句meta标签就行,写在head标签里

    • width viewport 宽度(数值/device-width)
    • height viewport 高度(数值/device-height)
    • initial-scale 初始缩放比例
    • maximum-scale 最大缩放比例
    • minimum-scale 最小缩放比例
    • user-scalable 是否允许用户缩放(yes/no)
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    

    写上这句代码后重新查看980px和350px的div,会发现内容变大了,350px占满了,980px溢出了,而且字体大小也正常了,这个是告诫我们在手机端标签的宽度最好是用比例,块级标签默认就是百分之一百,手机端切记不能让用户横向滑动,写上这句适配后,文字就用16px,14px就是正常手机的正常显示大小了

    高级些的适配,rem适配,这个在css里讲

    其他meta

    // utf-8 不解释
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- 忽略页面中的数字识别为电话,忽略email识别 -->
    <meta name="format-detection" content="telphone=no, email=no" />
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- 删除苹果默认的工具栏和菜单栏 -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- 设置苹果工具栏颜色 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    
  • 相关阅读:
    20190430-screen、client、offset、scroll等JS中各种宽度距离
    20190423-Vscode与Sass不得不说的秘密(>^ω^<)
    20190422-外部导入CSS样式之link、CSS@import、Sass分音
    20190421-那些年使用过的CSS预处理器(CSS Preprocessor)之Sass and Less
    20190421-那些年使用过的CSS预处理器(CSS Preprocessor)
    20190409-层叠の层叠上下文、层叠水平、层叠顺序、z-index、伪元素层叠
    20190408-规范书写
    20190404-transition、transform转换、animation、媒体查询
    20190402-display展现、float浮动
    20190401-颜色书写
  • 原文地址:https://www.cnblogs.com/pengdt/p/12037457.html
Copyright © 2011-2022 走看看