`
sillycat
  • 浏览: 2551349 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

Screen Size and Web Design

 
阅读更多
Screen Size and Web Design

iPhone Display Size(inches)
Diagonal measure of the screen, from corner to corner.

iPhone Screen Size(points)
Designing for the web(using CSS or JavaScript). Retina screens have higher pixel density.

iPhone Rendered Pixels
Create an image and want it at the max resolution.

iPhone Physical Pixels
This is the actual screen’s pixel resolution.

iPhone 6 Plus   
5.5 in (Display Size)
414 x 736 points (Screen Size Points)
1242 x 2208 pixels (Rendered Pixels 3 x multiple of points used for creating images)
1080 x 1920 pixels (Physical Pixels)

Some website they provide the Device List
http://www.viewportemulator.com/devices/

http://viewportsizes.com/

Here are some popular devices now
iPhone 6
iPhone 6 Plus
iPhone 5S
iPad Mini 2
iPad Air 2

This website is really amazing.
https://www.browserstack.com

References:
http://www.kylejlarson.com/blog/2015/iphone-6-screen-size-web-design-tips/
http://viewportsizes.com/?filter=iphone%205
https://www.browserstack.com/responsive

http://www.viewportemulator.com/devices/


分享到:
评论

相关推荐

    Responsive Web Design with HTML5 and CSS3(PACKT,2ed,2015)

    We’ll cover how to load different sets of images depending upon screen size or resolution and how to display different images in different contexts. Conquer forms! Add validation and useful ...

    Moving to Responsive Web Design [Apress 2016]

    and dominates the manner in which many users access the web, it is now imperative for any business to have a responsive website that adapts seamlessly to any screen size and resolution ― a change ...

    Responsive.Web.Design.with.HTML5.and.CSS3.Essentials

    first approach is more effective Maximize the performance of your web pages so that they work across all browsers and devices irrespective of the screen size Who This Book Is For This book is for web ...

    Moving to Responsive Web Design(Apress,2016)

    and dominates the manner in which many users access the web, it is now imperative for any business to have a responsive website that adapts seamlessly to any screen size and resolution ― a change ...

    Design for Hackers

    s fonts are designed with the screen in mind, Dissects the elements of color, size, scale, proportion, medium, and form, Features a unique range of examples, including the graffiti in the ancient city...

    Responsive.Design.High.Performance

    The Good, the Bad, and the Ugly of Responsive Web Design Chapter 2. Tweaking Your Website for Performance Chapter 3. Managing Images Chapter 4. Learning Content Management Chapter 5. The Fastest ...

    Learning Bootstrap 4 - Second Edition

    You'll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. Learn to play with Bootstrap's grid system and ...

    Learning.Bootstrap.4.2nd.Edition.1785881000

    You'll also discover the principles of mobile-first design in order to ensure your pages can fit any screen size and meet the responsive requirements. Learn to play with Bootstrap's grid system and ...

    iOS 9 Application Development in 24 Hours(SAMS,2016)

    • Use Auto Layout and Size Classes to adapt to different screen sizes and orientations • Build advanced UIs with Tables, Split Views, Navigation Controllers, and more • Read and write preferences ...

    CommonsWare.The.Busy.Coders.Guide.to.Android.Development.Version.8.2.2017

    Along the way, it covers how to embed the WebKit Web browser in your application, how to have your application use data from other installed applications (and vice versa!) or off the Internet, and ...

    Apress.Pro.Business.Applications.with.Silverlight.5.2nd.Edition.Feb.2012

    displaying it on the screen—this book will allow you to peer into all the nooks and crevices that represent good business and application design practices. This book is designed to be read from start...

    cuteEditor6.0

    <br/>学习应用Web标准有很多益处,下面给几个简单例子: <br/>获得好的搜索引擎排名: The separation of content and presentation makes the content represent a larger part of the total file size....

    SQLMemTable for Delphi / C++ Builder

    SQLMemTable for Delphi / C++ Builder: README============================================Please read ... FastReport Software -------------------Advanced report generators for Delphi and Kylix.Web Site: ...

    Info-Rawand-web

    例如,`@media screen and (max-width: 600px) {...}`会针对宽度小于或等于600px的设备定义样式。 此外,Flexbox(弹性盒子布局)和Grid布局是CSS布局的两种主要工具。Flexbox适用于一维布局,如导航栏或按钮组,而...

    VB编程资源大全(英文源码 表单)

    It is meant to inhance Interface Design without spending a lot of time on solely the interface.<END><br>25 , avb-addressof.zip An Example of Using the 'AddressOf' Operater in VB5 to Limit the Size ...

    js 手机网站 自适应

    响应式网页设计(Responsive Web Design, RWD)允许网页内容根据用户的行为和设备环境(系统平台、屏幕尺寸、屏幕方向等)进行相应的响应和调整。在手机网站中,图片自适应是响应式设计的一部分,确保图片能在任何...

    web_assignment5

    例如,`@media screen and (max-width: 600px)`可以定义当屏幕宽度小于600px时的样式规则。 【HTML5新特性】 HTML5引入了许多新的元素和功能,如`<canvas>`用于绘制图形,`<video>`和`<audio>`用于多媒体播放,`...

Global site tag (gtag.js) - Google Analytics