移动端基础
1.4 移动端手机调试的方法
- Chrome Dectools(谷歌浏览器)的模拟手机调试
- 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
- 使用外网服务器，直接IP或者域名访问。
特点
移动端浏览器我们主要对于webkit内核进行兼容
开发的移动端主要针对于手机端用户
移动端的碎片化严重 分辨率和屏幕尺寸大小不一。
用谷歌浏览器模拟手机界面进行调试
2、
视口:就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口，视觉视口 跟理想视口。
布局视口 layout viewpor
- 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题。
- ios，Android基本都将这个分辨率设置989px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认都可以通过手动缩放网页。
视觉视口 visual viewport
它是用户正在看到的网站的去与
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
理想视口 :ideal viewport
为了使网站在移动端有理想的浏览 和阅读宽度而设定
理想视口，对设备来讲，使最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的:布局视口的宽度应该与理想视口宽度一直，简单理解就是设备有多宽我们布局的视口就有多宽。
meta 视口标签
标准写法:
视口宽度和设备保持一致
视口默认缩放比例1.0
不允许用户自行缩放。
最大允许缩放的比例为 1.0
最小允许的缩放比例为1.0
二倍图:
- 物理像素和物理像素比:
- 物理像素点指的使屏幕显示的小颗粒，是物理真实存在的，这是厂商出场前就设置好的。
- 我们开发的时候1px，不是一定等于一个物理想告诉的
- PC端页面，1个px 等于1个物理像素的但是移动端就不一样了。
- 一个px的能显示的物理像素点的个数，称位物理像素化，或屏幕像素比。
设置一个三百×三百像素的盒子 看他分别在电脑端显示的
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minomu-scale=1.0,user scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 300px;
height: 300px;
background-color: pink;
}
/* 物理像素 就是我们说的分辨率 iphone8的物理像素就是 750px
2.在iPhone8中1px开发像素等于两个物理像素 */
</style>
</head>
<body>
<div></div>
</body>
</html>
PCC端和早期的手机屏幕:1css像素=1物理像素
是一摸一样的
后来出现了 一个Relina(视网膜屏幕)一种显示技术，可以将跟多的物理像素压缩至一块儿屏幕里，从而达到更高的分辨率从，并提高屏幕显示的细腻程度。
多倍图。
对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊
在标准的viewport设置中，使用倍图来提高图片质量，解决在高速设备中的模糊问题。
通常使用二倍图，因为iphone的影响，但是现在还存在3倍图四倍图的请况，这个看实际开发公司需求。
背景图片 注意缩放问题。
所以在实际开发中要准备大实际两倍的图片来进行缩放 这就是二倍图
这
446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
