移动web开发中屏幕适配问题

1、首先屏幕的尺寸就是屏幕对角线的长度 尺寸是固定的
2、开发中遇到的单位
相对单位(即相对于屏幕):px em pt
绝对单位(固定的大小,与设备屏幕无关):in cm
3、像素密度

像素密度指的是1英寸里面的像素的数量,比如1英寸里面是10px,通常有两种163(3gs) 330(4s)通常超过320的像素密度就是高清屏,计算方式:屏幕的分辨率高的平方+屏幕分辨率宽的平方 ,然后再开根号,再除以屏幕的英寸。

4、设备独立像素
设备独立像素表示真实像素和分辨率像素的一个比例,比如3gs手机高度480px,宽度320px分辨率,真实设备高度480px,宽度320px,即分辨率和真实像素一样的时候1pt = 1px;但是有一些设备高度960px,宽度640px,分辨率。真实设备高度480px,宽度320px,即分辨率是2倍的真实像素一样的时候,1pt = 2px。

5、物理像素和css像素
1、物理像素(分辨率的像素)960*640
2、css像素(真实像素)模拟器里面看见的320*568

6、视口
1、视口:浏览器的可视宽口在PC端是会受到浏览器窗口的变化而变化的
2、视口在pc端是可视窗口(会变的),在移动端会有一个固定的值,但通常默认980;
3、但是默认移动端的时候980会造成网页缩放或者出滚动条
4、解决移动端默认视口会造成网页缩放和滚动条,设置meta标签设置默认是视口的宽度等于设备的宽度
5、视口的其他属性初始化缩放initial-scale=1.0是否允许用户缩放user-scaleable=no,最大maximum-scale=1.0;和最小缩放minimum-scale=1.0;
6、meta:vp + tab 凡是写移动端页面,一开始就应该加上视口。

时间: 2024-10-25 04:03:55

移动web开发中屏幕适配问题的相关文章

Web 开发中 20 个很有用的 CSS 库

转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.我们

移动Web 开发中的一些前端知识收集汇总

在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下. 要说移动Web 开发与传统的PC 端开发,感觉也没什么不同,但得益于苹果对于智能机的推动,CSS3+HTML5几乎可以毫无顾忌的使用,然后浏览器端考虑webkit内核的就差不多了. webkit内核中一些私有的meta标签 1 2 3 4 <meta name="apple-mobile-web-app-capable" content

web开发中的长度单位(px,em,ex,rem),如何运用,看完这篇就够了!

原创 2017-03-08 web小二 web前端开发 作为一名前端开发人员,css中的长度单位,都是我们在工作中非常熟悉的名词,因为没有它们,我们就不能声明某个字符应该多大,或者某些图像周围应该留白多少,甚至有时候能导致css不能进行正常工作,所以在很多css属性中,它们都是依赖于长度单位来显示各种页面元素. 1.长度单位包括哪些? 长度单位,其实在我们的生活中,也非常常见,例如,厘米.毫米.英寸,还有经常接触到的像素(px),元素的字体高度(em).字母x的高度(ex).百分比(%)等等这些

[Java Web]2\Web开发中的一些架构

1.企业开发架构: 企业平台开发大量采用B/S开发模式,不管采用何种动态Web实现手段,其操作形式都是一样的,其核心操作的大部分都是围绕着数据库进行的.但是如果使用编程语言进行数据库开发,要涉及很多诸如事务.安全等操作问题,所以现在开发往往要通过中间件进行过渡,即,程序运行在中间件上,并通过中间件进行操作系统的操作,而具体一些相关的处理,如事务.安全等完全由中间件来负责,这样程序员只要完成具体的功能开发即可. 2.Java EE架构: Java EE 是在 Java SE 的基础上构建的,.NE

Web开发中的18个关键性错误

前几年,我有机会能参与一些有趣的项目,并且独立完成开发.升级.重构以及新功能的开发等工作. 本文总结了一些PHP程序员在Web开发中经常 忽略的关键错误,尤其是在处理中大型的项目上问题更为突出.典型的错误表现在不能很好区分各种开发环境和没有使用缓存和备份等. 下面以PHP为例,但是其核心思想对每一个Web程序员都是适用的. 应用程序级别的错误 1.在开发阶段关闭了错误报告 我唯一想问的是:为什么?为什么在开发的时候要关闭错误报告? PHP有很多级别的错误报告,在开发阶段我们必须将它们全部开启.

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏:) 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

如何OE开发中实现一个在web开发中的小效果

近期公司里面有一个需求,就是当业务人员点击订单列表中的某一条时希望打开一个新的窗口动作,然后把这一条记录中的某些值带过去,这样一个效果在web开发中很简单,或许就是分分钟的事情.但是在客户端这种开发中确实不易,尤其是OpenERP这种有诸多限制的框架里面. 那么如何实现呢? 这个地方我的想法主要分两步:1.打开一个新的窗口(Form视图的)2.把值带入到新的窗口里面. 第一步里面我按日常的操作在view里面创建一个向导(wizard),然后给name和id赋值,然后在创建一个wizard文件(名

WEB开发中常用的正则表达式集合

在计算机科学中,正则表达式用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串.在WEB开发中,正则表达式通常用来检测.查找替换某些符合规则的字符串,如检测用户输入E-mai格式是否正确,采集符合规则的页面内容等等.今天我将分别用PHP和Javascript向大家介绍WEB开发中最常用最实用的正则表达式及其用法,正则表达式是一门学科,不可能使用一篇文章来讲解完,理论的东西网上很多,有兴趣的同学可以搜一大把.不过你也许没必要去埋头学习琢磨不透的正则表达式,看本文和实例给您呈现常用.实用的正则