手机浏览器 viewport与屏幕分辨率

适配方案（四）适配的基础知识之单位、分辨率、viewport

适配的基础知识一.理解单位 px.pt.pc.sp.em.rem.dpr.dp.dip.ppi.dpi.ldpi.mdpi.hdpi.xhdpi.xxhdpi 如果你是ios开发,你需要了解的单位:pt,px,ppi:实际开发中用到的单位:pt. 如果你是android开发,你需要了解的单位:dip/dp,sp,px,dpi/ppi,ldpi,mdpi,hdpi,xhdpi,xxhdpi:实际开发中用到的单位:dp,sp. 如果你是前端开发,你需要了解的单位:px,em,rem,dpr:实际开

JS获取浏览器高宽度,屏幕分辨率和一些定位空隙等

IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY对象宽度 document.b

JS获取浏览器信息及屏幕分辨率

因为vue有自己的生命周期,初始化数据的时候,可以在钩子函数created()函数里初始化数据,也可以在mounted()函数里获取,但是两者是不同的,获取浏览器和屏幕分辨率的时候,不能在created()里获取,因为此时window和document都还没有生成,所以在mounted()里或者生成之通过其他触发的方法来获取网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.

JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式

代码如下: <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) }else{ if (window.navigator.userAg

webapp开发——‘手机屏幕分辨率’与‘浏览器分辨率’不要混淆

关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是”米3“,屏幕截图大小是1080宽,所以css样式用@media screen and(min-width:1080px){ …… },来判断屏幕最小宽度是1080px的手机web显示什么样的样式,结果却不能正常显示我所指定的css样式,最后在网上查了一下,发现分辨率的范围不对. css代码如下: @media screen and (min-width:1080px){ ...............

手机网页H5 自适应不同分辨率的屏幕必学标签meta之viewport

viewport 语法介绍 <meta name="viewport"content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes

Android程序对不同手机屏幕分辨率自适应的方法

相信各位Android开发爱好者都知道,由于OEM之间的竞争,各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x320,另外的还有QVGA=320x240.当然还有魅族M9的DVGA=960x640,还有蛋疼的摩托罗拉的FWVGA=854x480. 那么,如何让你的程序可以在不同分辨率的手机上“健康”的跑动呢? 其实,在你layout的xml文件中,编写的时候是不是用了许多的padding呢?如果是,那

Unity3D Android手机屏幕分辨率问题

Android手机屏幕分辨率五花八门,导致开发时不好把握,还好各个引擎对这个屏幕分辨率问题都有较好的处理方式:unity3D 也为我们提供了一个不错的解决方案. 在Unity3D 进行 android 游戏开发时,对于不同分辨率下的显示效果就像是摄像机的自动平移了一般,看了不少游戏,对于 Unity3D 开发 android 游戏貌似都没有做相应的屏幕分辨率的处理,而是随摄像机的自动移动,把场景做大些不至于出现空白背景. 其实 Unity3D 开发3D游戏,对于不同的分辨率,我们只需要设置 1

获取android手机的屏幕分辨率 android开发

/** * 获取屏幕分辨率 */ private void getResolution() { // TODO Auto-generated method stub Display display = getWindowManager().getDefaultDisplay(); DisplayMetrics displayMetrics = new DisplayMetrics(); display.getMetrics(displayMetrics); float density = dis

使用视 meta 标签来控制手机浏览器布局

移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看到页面的不同区域. 移动Safari浏览器推出了"视口元标记",让Web开发人员控制视口的大小和规模.许多其他移动浏览器都支持这个标签,虽然它不是任何Web标准的一部分.苹果公司的文档做得很好解释如何Web开发人员可以使用这个标签,但我们不得不做一些侦探工作,以找出究竟是如何实现它的Fen

cocos2d-x屏幕分辨率，窗口大小总结

这个东西很烦人,相信很多人都不理解今天来总结一下,首先有很多概念都要事先弄得清楚明白 1.屏幕分辨率所谓屏幕分辨率相信很多人都知道他的概念,不就是1280pxX720PX吗?不就是这种形式吗?有什么难的,这几个词在各种手机评测上面不是已经用烂了吗? 可是很多人都没有真正理解这个概念!!! 1280pxX720px 它的意思是纵向1280个像素,横向720个像素. 记住!只是像素而已,和尺寸,和大小,和比例没有半毛钱的直接关系我一直都以为为什么这个东西要叫做屏幕分辨率,为什么要叫做分辨率?之

HTML5开发手机应用--viewport的作用

在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 什么是Viewp

（转）JS获取当前对象大小以及屏幕分辨率等

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--> <script type="text/javascript">function getInfo(){ var s = ""; s += " 网页可见区域宽:"+ document.body.clientWidth+"\n&q

Swiper滑动Html5手机浏览器自适应

手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度. window.onload=function(){ var swiper = document.getElementById("swiper"); var scale = window.screen.height / window.screen.width; swiper.style.height = document.body.clientWidth * scale

响应式设计：理解设备像素，CSS像素和屏幕分辨率

概述屏幕分辨率.设备像素和CSS像素这些术语,在非常多语境下,是可互换的,但也因此easy在有差异的地方引起混淆,实际上它们是不同的概念. 屏幕分辨率和设备像素是物理概念,而CSS像素是WEB编程的概念:屏幕分辨率和设备像素的区别在于设备像素显示密度. 当设备屏幕ZOOM=100%的时候,浏览器CSS像素尺寸和设备像素相等,而当像素密度(pixel density)为1的时候,屏幕分辨率和设备像素相等. 响应式设计在响应式设计中,使用了viewport,device-width,media

css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题

近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都是设计一套放大1倍的图标,再压缩显示. 我们都知道<img>标签能够通过固定宽高的方式来压缩大图.从而得到高清的显示效果,而图标一般用背景图来呈现,怎么搞呢?好吧.css3出了一个非常牛逼的属性background-size能够直接设置背景图的宽高,直接攻克了前者的疑惑. 那么问题来了,我们的网页

js判断移动终端（手机浏览器）

方法1: <script type="text/javascript"> var browser = { versions: function () { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.

html兼容手机浏览器

其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"/> 解释: device-width 是viewport的宽度 device-height 是

HTML5开发手机应用--viewport的作用--20150216

在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /> 什么是Viewp

Jsp编写的页面如何适应手机浏览器页面

经常遇到JSP网页需要适配手机设备的尺寸问题解决: 在JSP加入<meta name="viewport" content="width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0"/> content属性值 :width:可视区域的宽度,值可为数字或关键词device-width(设备的宽度)maximum-scale=2.0, minimum-scale

JS 获取浏览器窗口大小获取屏幕，浏览器，网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的高) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr

手机浏览器 viewport与屏幕分辨率

热门专题