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

<script> var phoneWidth = parseInt(window.screen.width); var phoneHeight = parseInt(window.screen.height); var phoneScale = phoneWidth/750; //除以的值按手机的物理分辨率 var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(R…

今天  我对iOS系统下 的手机屏幕尺寸 分辨率 及系统版本做了一次系统总结 供大家参考. 首先 是系统:    随着iOS 系统不断升级,现在已经到iOS7.0了, 并且TA有了很多新变化,最震撼的就是 屏幕坐标的变化,为了增大屏幕使用率,iOS7鼓励把状态栏加入坐标使用,也就是坐标整体向上平移20个单位像素(点).这个就需要在做布局的时候考虑进去. 首先判断是不是iOS7 还是小于iOS7   代码如下:// 判断设备的iOS 版本号     float version = [[[UIDev…

问题的产生 因为各方面原因,要用网页做界面,开发一个APP.内核使用的是腾讯的x5内核. 把外壳交给前端和设计测试的时候,都汇报:状态栏的颜色太不搭配了,要求可修改 遂启用了安卓4.4版本开始支持的沉浸式状态栏,打算把状态栏交给前端去自己绘制. 并提供了API,可以获取状态栏的高度. 没多久,前端报告,返回的高度有问题,比状态栏高很多. 于是我测了下,api返回的状态栏高度:55像素. 使用 安卓开发者工具 里的坐标测量工具测了下,状态栏高度的确是55像素左右 让前端好好检查他的代码. 然而前端…

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

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

分辨率,是指单位长度内包含的像素点的数量,它的单位通常为像素/英寸(ppi).以分辨率为1024×768的屏幕来说,即每一条水平线上包含有1024个像素点,共有768条线,即扫描列数为1024列,行数为768行.分辨率不仅与显示尺寸有关,还受显像管点距.视频带宽等因素的影响. 主流分辨率: 代号 分辨率 代号 分辨率 QVGA 320*240像素 WQVGA 400*240像素 HVGA 320*480像素 VGA 640*480像素 WVGA 800*480像素 XGA 1024*480像素…

CSS宽有14种: 320.360.375.384.400.414.533.600.768.800.853.1024.1280.1366 CSS高有16种: 360.480.533.568.569.600.640.667.720.736.768.800.853.960.1024.1280 考虑到屏幕可能变为竖屏,那么综合一下共20种: 320.360.375.384.400.414.480.533.568.600.640.667.720.736.768.800.853.853.960.1024.…

以下只是我个人得总结,如果你有更好的建议,请留言,一起共勉进步!!- -! 1.要响应式开发web,也就是页面必须自适应屏幕大小,可以采用流体布局,如之前的文章(自适应宽度布局),其他具体的小问题可以采用media query解决(让IE支持CSS3 Media Query实现响应式Web设计和CSS3 Media Queries): 2.因为手机大多是高级浏览器,可以使用html5+css3开发: 3.合理灵活的使用meta标签,具体如下: <meta content=”width=devic…

1.媒体查询方法在 css 里面这样写 -------------------- @media screen and (min-width: 320px) and (max-width: 480px){在这里写小屏幕设备的样式} @media only screen and (min-width: 321px) and (max-width: 1024px){这里写宽度大于321px小于1024px的样式(一般是平板电脑)} @media only screen and (min-width:…

继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接上代码 注意:此教程是接上一篇教程,也就是所有的内容是直接从body开始写,当然,也会贴出所有代码给大家. 第一步:框架的布局及幻灯片的布局(Html) ① 如上图所示,我们应该准备以下容器,方便填充内容 <!--页面容器--> <div class="page-container…

此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元素  一.屏幕分辨率 // 获取屏幕横向分辨率 window.screen.width // 获取屏幕纵向分辨率 window.screen.height 执行结果如下所示: 二.浏览器显示区域 // 浏览器显示区域宽度,包含滚动条 window.innerWidth // 浏览器显示区域高度,包含…

原文:检测客户端显示器分辨率.浏览器类型和客户端IP 下面的代码实现了检测客户端显示器分辨率.浏览器类型和客户端IP的功能.你可以把客户端信息保存到Session,ViewState等中以便在其它的页面直接使用. 例子 ClientPeek.aspx 检测客户端显示器分辨率.浏览器类型和客户端IP ClientPeek.aspx.vb Imports System Public Class ClientPeek Inherits System.Web.UI.Page Protected With…

今天说的内容有点流氓,请诸君在开发应用时谨慎使用. 那么,这活儿到底有多流氓呢? 先介绍一下要实现的功能:当用户按电源键(也可以是双击屏幕)点亮手机的屏幕时播放一下短音乐,而且应用程序可以不在前台运行的时候播放. 有朋友脑海里也许马上浮现出两个词:后台音频,后台任务. 是的,灰常正确,能在应用程序不在前台运行或者不运行时播放声音,只有用后台音频了.好,原理就是这样,我相信没有什么难理解的吧.下面就是如何达到这一目的. 在8.1中播放后台音频可以用Windows.Media.Playback命名空…

移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决方案. 一.基本概念 (1) CSS pixels与device pixels CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容. device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色.亮度. 等值的 CSS pixels在手机屏幕上占多大的位置,这…

#webApp开发几点体会(移动前端) ##前言 本文旨在记录本人涉足移动webApp开发的几点体会,欢迎分享与指正. ##再见,IE678 移动设备,Android跟iPhone是主流,即使是win8设备,自带的都IE9以上,再也见不到那个不按W3c套路解释的浏览器了,很多兼容性问题都可以放下,专心处理业务了. ##HTML5/CSS3 HTML5/CSS3在移动设备上已经非常普及了,再也不用考虑以前在桌面设备上是否有旧版本浏览器的问题了.HTML5的跨平台.便于维护.开发成本低,各种优点使得…

注:本文转载于:http://blog.csdn.net/welovesunflower/article/details/7930248 一些术语 Screen Size 屏幕尺寸: 实际的物理尺寸,以屏幕的对角线为准(包括通知栏?) 将所有的实际尺寸分为四个广义的尺寸:small(小),normal(正常),large(大),extra large(特大) Density 屏幕密度: 屏幕的屋里面积内的像素数量,通常指dpi(每英寸点数) small的屏幕密度比normal或large在一个给…

好了,的所有的基础知识已经准备完毕了,现在开始制作引导页.这个引导页需要一个HTML文件,JS文件,一个CSS文件.在HBuilderX中根目录下添加“Guid.html”,在JS文件夹添加“myth.js”,在CSS文件夹下添加“myth.css”. 一.myth.js文件 该文件是个插件,对常用的操作进行了封装,本章节主要把该文件的框架搭建出来,随着开发的深入,会不断的完善这个js文件,最后它会成为一个丰富的插件,一遍以后使用. (一)基本框架 ; //JavaScript 弱语法的特点,如…

前言 在移动浪潮袭来的时候,小钗有幸进入框架组做webapp框架开发,过程中遇到了移动端的各种坑,也产生了各种激情,就我们公司的发展历程来说 第一阶段:使用传统方式开发移动站点,少量引入HTML5元素 第二阶段:框架化,使用jquery mobile框架,发现慢,组件不好管理,不好维护给搞掉了 第三阶段:jquery+Backbone的组合,最后为了瘦身将jquery换成了zepto 第四阶段:框架适应Hybrid版本,Hybrid相关频道与H5站点一套代码,业务扩展遍地开花 第五阶段:框架适应…

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

用谷歌调试工具中的手机模拟器模拟手机进行webapp的开发,与真机上的效果还是有些偏差,opera手机模拟器的效果亦不佳.有时在pc上开发出来的webapp效果良好,在部分真机上就出现了偏差,这时候就需要我们进行微调.     在pc上微调后发布到测试环境再在手机上看效果,开发很慢,效率很低.这时候就想着有一个可以在手机上调试的工具,可以随时更改参数随时看到手机上的效果,免去发布再测试.模糊估计参数不精准的麻烦,weinre就是一个这样的工具.     weinre可以在PC上远程调试手机上的页…

相机拍的图,电脑上画的图,word里的文字,电脑屏幕,手机屏幕,相机屏幕显示大小一切的一切都搞明白了! 先说图片X×dpi=点数dotX是图片实际尺寸,简单点,我们只算图片的高吧,比如说拍了张图片144×144 72dpi,那么它的实际高就是144÷72=2吋dpi是每吋点数,在相机拍出一张图片之后它的dpi就确定了(右键属性摘要里就能看),比如最常见的72dpi,还说上面提到的144×144 72dpi的图片,72dpi的意思是说如果也按照72dpi打印图片的话打印出来还是高2吋(X)的可是我…

和大多数响应式的布局一样,webapp开发也是需要浮动布局和百分比布局,需要考虑的是小屏幕手机250px和大屏幕设备768px,但是习惯以320px和640px来分割,jq中的一句话$(function(){$(window).resize(function() {var isWidescreen=$(this).width();if(isWidescreen<320){isWidescreen=320;}else if(isWidescreen>640){isWidescreen=640;}…

话说现在的手机型号越来越多,主要还是android和ios这2个巨头称霸了江湖,而他们自带的浏览器内核是webkit,那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了,看起来很简单,其实背后还有一个大坑等着你. 虽说是webkit内核,但页面的展现效果还会受到自身系统的影响,升级后的系统打了补丁,新增了新的属性,支持更多丰富炫丽的效果,那么旧的系统(未升级的)就不支持一些新的属性,开发哥哥就是没有做好低端版本兼容的话,就会产生所谓的bug的,再加上android…

因为上一篇博客需要展示一些软件操作过程,如果直接截图的话一来可能需要多张图,二来表达也不方便,所以特意去查了下如何录制手机屏幕操作,然后转成gif,嵌入进博客中,这样表达起来就方便多了.话不多说,总结了两种方法,这就写出来.PS一点,使用以下方法,必须保证安卓系统在4.4以上,至于4.4以下能不能行,可以自行验证. 2016-9-13更新:好像这个需求还是有很多人需要的,在此推荐一个更简单方便的录制方法. 2015-11-15更新:发现第三种方法,更快更方便. 首先先来看下效果,怎么样,是不是有…

引言 首先说明一下,本文分享对象是涉世未深的移动开发者,至于有经验的开发者可以自行绕道. 说来惭愧,做了几年pc端的前端开发,很少接触到webapp的移动端开发.如今有机会参与webapp的开发,发现与pc端开发还是有一些区别的. 例如,移动端的浏览器要么是Android的chrome,要么是ios的safari:可以发现:他们都是基于webkit内核的.而也有使用windows phone的手机(ie的那一套),但是从市场使用上来看,其可以忽略不计.因此做移动端的前端开发有一些特别之处: 不用…

DisplayMerics:A structure describing general information about a display, such as its size, density, and font scaling. 本节主要用了三个对象TextView ,Button ,以及DisplayMetrics ,其中Displaymetrics 是取得手机屏幕大小的关键类,这个例子非常的简单,当我们点击按钮,触发事件,在TextView 里显示手机屏幕的宽高分辨率． 看一下效果图…

屏幕区域的获取: activity.getWindowManager().getDefaultDisplay(); 应用区域的获取: Rect outRect = new Rect(); activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(outRect); view图形绘制区域的获取: Rect outRect = new Rect(); activity.getWindow().findViewById(Windo…

以下是 iPhone的型号和对应的屏幕宽高 英寸  宽 高  厚度 3.5   320 480 4s      ipad   系列   4   320 568 5   5s   4.7  375 667     iPhone 6 1334X750像素的显示屏    A8处理器      6.9毫米 326 ppi   5.5      414     736    iPhone 6 Plus      Retina HD高清显示屏,1920x1080像素分辨率   7.1毫米 401 ppi  …

adb shell screenrecord命令可以用来录制Android手机视频 screenrecord是一个shell命令,支持Android4.4(API level 19)以上,支持视频格式: mp4 adb shell screenrecord --help  可以查看相关帮助信息 adb shell screenrecord /sdcard/demo.mp4 录制手机屏幕,视频格式为mp4,存放到手机sd卡里,默认录制时间为180s adb shell screenrecord -…