移动Web开发入门

最新推荐文章于 2024-04-09 17:50:27 发布

要好好写代码才行

最新推荐文章于 2024-04-09 17:50:27 发布

阅读量131

点赞数

分类专栏：移动Web开发文章标签： css html javascript

本文链接：https://blog.csdn.net/visibleforest/article/details/119983882

版权

移动Web开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

移动Web开发入门知识

1.移动Web与PC Web开发的关系

基本知识体系没有太大的区别：

HTML、CSS、JavaScript；

不同的终端设备具有不同的特性：

屏幕大小不同、网络环境和设备性能不同、交互方式不同、兼容性不同

2.移动Web端的基本概念

分辨率：纵向的屋里像素的个数 x 横向的屋里像素的个数

物理像素：又叫设备像素，出厂时就被设定死的，无法改变的，不同设备的物理像素点大小不同

css像素：又名逻辑像素，又叫设备独立像素，他是与设备无关的像素。css像素会自动换算成对应的物理像素

设备像素比(dpr): dpr = (在一个方向上)设备像素/css像素(没有缩放时)

标清屏：dpr=1,高清屏：dpr>1

缩放改变的是css像素的大小；

ppi(pixels per inch):每英尺的物理像素点，又叫dpi

3.Viewport

Viewport使用：

viewport是meta标签中的一个属性,

值的设置：

width=device-width,宽等于设备宽

height其实很少使用，因为height过高了，可以有滚动条，只需要注意width就行。

initial-scale = 1 初始缩放比例，一定程度上等同于width=device-width。原因是initial-scale有兼容性问题，所以最好两个一起写

user-scalable=no 禁止用户缩放

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--width=device-width 和 initial-scale=1.0用来设置视口初始大小，两个都写上以防兼容性问题
    user-scalable=no用来设置视口是否可以被缩放，  maximum-scale=1, minimun-scale=1 也有同样的效果" -->
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0,
    user-scalable=no, maximum-scale=1, minimun-scale=1 ">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
   //获取视口宽度
   console.log(document.documentElement.clientWidth);
   console.log(document.documentElement.getBoundingClientRect().width)
   //由于screen.width获取的是屏幕尺寸，或者获取屏幕的分辨率，我们不推荐使用。
</script>
</html>