移动设备分辨率及响应式断点汇总

  最近一段时间都在忙于移动端工作的开发,其间积累了一些经验,在此和大家分享一下。如有不正确的地方,还希望网友能及时指正!

  移动端开发最头疼的事情,莫过于设备的适配。也就是根据设备分辨率的大小,要展示一样的页面。首先要提醒大家注意的地方是,页面头部一定添加如下代码:

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

  上述代码主要声明,视口的宽高等,在此不再赘述。

  下面将列出一些机型在上述代码的基础上的分辨率:

测试代码:

alert(window.innerWidth+": 视窗宽度"+window.innerHeight);
alert(screen.width+": 屏幕分辨率"+screen.height);

上述只是众多机型中的部分,还有很多没有列出,希望热心网友可以继续补充。

有需要购置家用路由器和键盘鼠标的童鞋,不要忘记猛点宏正数码哦,在此欢迎!

转载请标明出处:http://www.cnblogs.com/callmesummer/p/4048605.html

拿出手机,打开支付宝扫一扫,再小的力量,也是一种支持:

时间: 2024-08-29 14:04:57

移动设备分辨率及响应式断点汇总的相关文章

SASS优化响应式断点管理

前端开发whqet,csdn,王海庆,whqet,前端开发专家 原文:<Managing Responsive Breakpoints with Sass> 作者:Hugo Giraudel,来自法国,著名SASS大牛,在SassWay等多个站点撰文推广sass,是SassyJSON.SassyMatrix等多个开源项目的开发人员,大家能够到他的官方站点.github上了解详情. 翻译:前端开发whqet,以意译为主,不当之处请大家批评指正. -------------------------

基于不同设备下的响应式布局的原理

一.响应式开发 现在移动设备用户的增多,我们在PC端开发的页面不能完美的适配于移动端,那为了让移动端的用户拥有用好的体验效果,一般来说,我们会针对移动端来做一套特定的版本.而显然,技术是不断更新迭代的,这时候就出现了响应式开发,指的是同一页面在不同屏幕尺寸下有不同的布局,即用一套代码,来适配不同的设备. 二.响应式布局的原理 1.通过CSS中的媒体查询,即media queries,可以针对不同的媒体类型定义不同的样式. 语法:@media all and(min-width:??px)and(

响应式断点应该要设在哪里

做页面时我们常常遇到一个问题,做响应式布局时断点应该设在哪里?难道要对着各种设备尺寸一个一个地调?这得调到猴年马月. 当然,我们能想到这个问题,各大框架也会考虑到这点,而且只会得考虑得更周到.这时候我们只需要打开一些做得比较好的前端框架,查看下它关于响应式的源代码就可以找到我们想要的答案. 而我参考的框架是uikit(http://www.getuikit.net): 1.手机纵向:小于 479px 2.手机横向:480px 到 767px 3.平板电脑纵向:768px 到 959px 4.台式

jQuery适合移动设备触摸屏的响应式幻灯片插件

flickity是一款响应式.适用于移动设备触摸屏.可滑动显示的jQuery幻灯片插件.该幻灯片插件可以设置多种显示效果,可以自动播放,是一款移动优先的jQuery幻灯片插件. 你可以将该幻灯片插件当做一个jquery插件来调用.也可以使用纯js来调用该插件.还可以在HTML中初始化Flickity插件,不用写任何的js代码. 在线演示:http://www.htmleaf.com/Demo/201501291295.html 下载地址:http://www.htmleaf.com/jQuery

响应式设计(一)

一.响应式设计(一)响应式设计初识,一个小小的demo,用来理解什么是响应式 今天的一个小小的demo,让我重新的认识了什么是响应式网页设计.我之前一直以为主要一个网页在不同的设备上浏览,网页可以自适应设备的屏幕大小,而不发生结构变形. 其实我觉得更准确去说是:根据不同的用户设备环境,页面可以做出不同的响应动作, 例如:在pc端浏览一行图片,看到的个数是4个,用手机看到的是2个图片,不同用户的设备环境,做出了不同的响应动作. 二.百度百科给出的概念: 响应式Web设计(Responsive We

响应式网页

页面有能力去自动响应用户的设备环境,响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 响应式Web设计是在开发和设计网站过程中产生的一种方式,它的目的是让内容布局能随用户使用显示器的不同而变化.再明确点说,这种设计概念,就是让原本1292像素宽,4栏的内容,能够很好地显示在1025像素宽的用户屏幕上,同时还能自动简化成2栏.当然,让它很好的适应智能手机和其他种类电脑的屏幕也就成了水到渠成的事了.这种特殊的设计形式就被成为“响应式Web设计”页面的设计与开发应当根据

sass重构响应式unofficial‘s博客轻松适应移动端

前言: 刚刚玩博客园几天时间,发现挺不错的,对于我这个懒人又是一个爱折腾的人来说挺不错的,对于上班玩电脑,下班玩手机的用户来说,博客园中我的博客有一点给我的感觉不是很友好,电脑端看起来很美观的一个页面,移动端竟然也是原模原样的“美观”,由于工作主要是从事移动端开发,看着博客可以禁用模板样式,于是乎就决定把博客样式重构一下,分享是一种美德,不喜勿喷.本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 准备工作: 编辑工具

响应式布局的几点关注

什么是响应式界面? 理论上,响应式界面能够适应不同的设备.描述响应式界面最著名的一句话就是"Content is like water".如果显示器是一个容器,那么所有要呈现的网页内容就像水一样.在方而法方,在圆而法圆. 为什么要设计响应式界面? 即便是PC或Mac用户,只有一半的人会将浏览器全屏显示,而剩下的用多大的浏览器很难预知.台式机.投影.电视.笔记本.手机.平板.手表.VR等职能设备正在不断增加,主流设备的概念正在消失.屏幕分辨率正在飞速发展,同一张图片在不同的设备上看起来大

什么是响应式设计?为什么要做响应式设计?响应式设计的基本原理是什么?

页面的设计和开发应当根据用户行为以及设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相应的响应和调整.具体的实践方式由多方面组成,包括弹性网格和布局.图片.css media query的使用等.无论用户正在使用笔记本还是iPad,我们的页面都应该能够自动切换分辨率.图片尺寸及相关脚本功能等,以适应不同设备:换句话说,页面应该有能力去自动响应用户的设备环境. 响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本.这样,我们就可以不必为不断到来的新设备做专门的版本设计和开发