web网站如何实现兼容手机
web网站如何实现兼容手机
一、总结
一句话总结:加上这句话即可:<meta name="viewport" content="width=device-width,initial-scale=1.0">。
1、移动设备上的三个viewport是哪三个,分别代表什么?
ppk把移动设备上的viewport分为layout viewport 、 visual viewport 和 ideal viewport 三类,其中的ideal viewport是最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度,只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px),那么这个元素的宽度就是设备屏幕的宽度了,也就是宽度为100%的效果。ideal viewport 的意义在于,无论在何种分辨率的屏幕下,那些针对ideal viewport 而设计的网站,不需要用户手动缩放,也不需要出现横向滚动条,都可以完美的呈现给用户
2、移动设备上的理想视图区域是什么?
就是屏幕的物理宽度。
3、css中的1px并是否等于移动设备的1px,为什么?
不等于,因为在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。
4、影响css的px与物理设备px的因素有哪些?
手机设备和用户缩放。
还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于这点,在文章后面的部分还会讲到。
5、要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但是最后为什么我们两个一起用?
要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病:
<meta name="viewport" content="width=device-width, initial-scale=1">
6、手机浏览器为了兼容桌面网站,做了什么样的操作?
浏览器默认的viewport叫做 layout viewport,手机浏览器把默认的viewport的宽度值设置为为800px,980px,1024px等这些。
二、meta name="viewport" content="width=device-width,initial-scale=1.0" 解释
移动前端开发之viewport的深入理解
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。
一、viewport的概念
通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。
二、css中的1px并不等于设备的1px
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素。但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级,分辨率也是五花八门,安卓设备上的一个css像素相当于多少个屏幕物理像素,也因设备的不同而不同,没有一个定论。
还有一个因素也会引起css中px的变化,那就是用户缩放。例如,当用户把页面放大一倍,那么css中1px所代表的物理像素也会增加一倍;反之把页面缩小一倍,css中1px所代表的物理像素也会减少一倍。关于这点,在文章后面的部分还会讲到。
在移动端浏览器中以及某些桌面浏览器中,window对象有一个devicePixelRatio属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。css中的px就可以看做是设备的独立像素,所以通过devicePixelRatio,我们可以知道该设备上一个css像素代表多少个物理像素。例如,在Retina屏的iphone上,devicePixelRatio的值为2,也就是说1个css像素相当于2个物理像素。但是要注意的是,devicePixelRatio在不同的浏览器中还存在些许的兼容性问题,所以我们现在还并不能完全信赖这个东西,具体的情况可以看下这篇文章。
devicePixelRatio的测试结果:
web网站如何实现兼容手机相关推荐
- web网站判断是手机访问还是pc电脑访问的检测逻辑
作者: lizongbo 发表于:00:25. 星期三, 一月 26th, 2011 版权声明 :可以任意转载,转载时请务必以超链接形式标明文章 原始出处 和作者信息及本版权声明. http:// ...
- Web移动端商城 移动端商城手机网站html整套模板,web移动商城仿app手机模板下载
此模版是在某公司做微信公众号时嵌入的,那时候还没有小程序,本身不是做前端H5开发的,很多地方做的不好,仅供参考,多年以前的东西了算是一个回忆吧. --Web移动端商城 移动端商城手机网站html整套模 ...
- 好用的手机Web网站开发工具:Mobirise for Mac
Mobirise mac版是一个用户友好且直观的手机Web网站开发工具,可以为您提供正确的工具和模板,使您能够尽可能轻松地构建网站,而无需编写一行代码.只需点击几下鼠标,即可为您提供用户友好的环境以及 ...
- 宝塔asp php,宝塔Windows面板部署ASP、ASPX程序WEB网站环境方法
宝塔Windows面板部署ASP.ASPX程序WEB网站环境方法 一般Windows系统建站用户可能较多是程序是ASP或者是ASPX的,这样只能在Windows系统中才能运行.说实话,对于中文软件来说 ...
- 12个免费在线的Web网站性能测试工具
本文向你推荐12个免费在线的Web网站性能测试工具. 1. Web Page Test 从世界各地多个地点,使用真正的浏览器(IE和Chrome),并在真正的消费者连接速度,对你的网站进行速度测试.您 ...
- 各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应。
各种风格404错误页面html模板源码30多套高大尚响应式网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响应. 下载链接 各种风格404错误页面html模板源码3 ...
- 【一】综合架构(web网站架构)
文章目录 一.架构基础知识概述 二.酒店人员组织架构 三. web网站架构 四. 总结 一.架构基础知识概述 项目: 类似于手机的app,每一个app都可以算做一个项目.还比如游乐场里面的项目,由各个 ...
- 62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响
62套儿童行业响应式Html5儿童慈善机构网站模板儿童公益组织企业官网模板儿童慈善CSS模板下载婴儿树儿童健康食品整站模板html5网页静态模板Bootstrap扁平化网站源码css3手机seo自适响 ...
- WebSocket + Redis简单快速实现Web网站单设备登录功能
1.写在前面的话 生活中,我们在使用一些APP的时候,有过一种体验,就是在A手机上登录账号,因为某些原因需要在B手机上登录,然后就会在A手机上看到类似"该账号在其他设备登录"的提示 ...
最新文章
- OpenCV制作自己的线性滤镜
- websecurity - Web Security Testing Framework 超级牛B扫描器
- javascript 实现页面显示当前时间 动态读秒
- markdown分享
- pyinstaller生成exe文件失败
- 第一次ScrumMeeting博客:团队任务分解
- 《Scikit-Learn与TensorFlow机器学习实用指南》 第3章 分类
- AZURE-百万像素定焦镜头
- Visual C++ 时尚编程百例002(MFC窗口)
- [PyTorch] reverse the normalization
- 阿里云服务器安装宝塔面板和配置安全组
- 极客大学架构师训练营 系统架构 淘宝架构 第四次作业
- 【数学建模】美赛特等奖提名经验总结
- java连连看代码_Java版连连看
- JS特效一:图片轮播图(JS必须掌握的特效)
- MuMu模拟器 安装电脑本地apk
- 用python玩3x3数字华容道
- Android 蓝牙 A2dp音频数据通过L2cap 发往Controller -- 代码详解
- xp 开机画面【欢迎使用】四个字更改方法
- 单片机:数字电压表TLC2543 C程序代码