前端学习笔记之移动端 3.23

本文介绍了移动端开发的基础知识,包括移动端常见浏览器、屏幕尺寸和调试方法。重点讲解了视口的概念,如布局视口、视觉视口、理想视口,并详细阐述了meta视口标签的作用。此外,还探讨了二倍图的重要性,解释了物理像素和背景缩放属性`background-size`在高清设备中的应用。最后,提出了移动端开发的两种解决方案:单独制作移动端页面和响应式设计。
摘要由CSDN通过智能技术生成

1 移动端基础

PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。

移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。

国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主研发的内核,就像国内的手机操作系统都是基于Android修改开发的一样。
总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。

常见移动端屏幕尺寸:

常用移动端调试方法:

1.Chrome DevTools(谷歌浏览器)的模拟手机调试

2.搭建本地web服务器,手机和服务器一个局域网内,通过手机访问服务器

3.使用外网服务器,直接IP或域名访问
 

2 视口

视口(viewport)就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

2.1 布局视口 layout viewport

一般移动设备的浏览器都默认设置了一个布局

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值