retina

Media query for high resolution mobile 1080px (Xperia Z etc)

大憨熊 提交于 2019-12-01 18:31:43
问题 I am trying to get to grips with media queries for different devices. I have tried my new Sony Xperia Z mobile and displays in full scale site format due to the high resolution. How do I add a media query to re-size a grid and format like a standard mobiles scale? On the Xperia the font is also too small to read and needs to show bigger. Is this a problem for retina devices that act like full size monitor displays? Xperia Z - resolution 1920 × 1080, PPI 443 How do I include media queries for

Java 9 hdpi display support - multi-resolution images - name convention and loading in Windows

戏子无情 提交于 2019-11-29 01:00:29
According to these articles: http://news.kynosarges.org/2015/06/29/javafx-dpi-scaling-fixed https://twitter.com/michaelsamarin/status/729234779292483584 Java 9 should support high DPI displays (automatic DPI scaling) in Swing. I have tested it on the last version of Java 9 Early Access + on Zulu 9 and it works and looks really great. I was unable to solve only one thing - high resolution/retina image loading. According to articles (links) above and below it should use an Apple name convention ( @2x ): image.png , image@2x.png , image@3x.png , etc. I tested these loading methods: Toolkit

web前端入门到实战:CSS尺寸单位介绍

佐手、 提交于 2019-11-28 01:27:09
前端开发过程中,尺寸单位是我们必须用到的,下面我们对css中常见的几种尺寸单位px,em,rem,rpx进行逐一介绍 在这之前,需要先对几个概念进行普及介绍 基本概念 (以下概念读起来可能有些晦涩,如果看不懂也没关系) 像素 它不是自然界的物理长度,指基本原色素及其灰度的基本编码。 css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的。 在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点。 在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个css像素确实是等于一个屏幕物理像素的。 后来随着技术的发展,移动设备的屏幕像素密度越来越高,从iphone4开始,苹果公司便推出了所谓的Retina屏,分辨率提高了一倍,变成640x960,但屏幕尺寸却没变化,这就意味着同样大小的屏幕上,像素却多了一倍,这时,一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。 物理像素 它是显示器(电脑、手机屏幕)最小的物理显示单位,物理像素指的是显示器上最小的点。物理像素的大小取决于屏幕。是一个无法改变的属性。 设备独立像素 我上一张图,你就会理解什么是设备独立像素 就是我们开发过程中使用的css中的px 设备像素比(device pixel

SVG rendered into canvas blurred on retina display

点点圈 提交于 2019-11-28 00:15:16
I have an issue with SVG rendered into canvas. On retina displays canvas rendered as base64 url and set as SRC into is blurred. I've tried various methods that was described in list below with no luck: https://tristandunn.com/2014/01/24/rendering-svg-on-canvas/ How do I fix blurry text in my HTML5 canvas? Canvas drawing and Retina display: doable? https://www.html5rocks.com/en/tutorials/canvas/hidpi/ Now i don't know what should i do to make it better. Please look into my result: jsfiddle.net/a8bj5fgj/2/ Edit: Updated fiddle with fix: jsfiddle.net/a8bj5fgj/7/ Retina display Retina and very

Java 9 hdpi display support - multi-resolution images - name convention and loading in Windows

。_饼干妹妹 提交于 2019-11-27 15:31:49
问题 According to these articles: http://news.kynosarges.org/2015/06/29/javafx-dpi-scaling-fixed https://twitter.com/michaelsamarin/status/729234779292483584 Java 9 should support high DPI displays (automatic DPI scaling) in Swing. I have tested it on the last version of Java 9 Early Access + on Zulu 9 and it works and looks really great. I was unable to solve only one thing - high resolution/retina image loading. According to articles (links) above and below it should use an Apple name convention

SVG rendered into canvas blurred on retina display

馋奶兔 提交于 2019-11-26 21:40:08
问题 I have an issue with SVG rendered into canvas. On retina displays canvas rendered as base64 url and set as SRC into is blurred. I've tried various methods that was described in list below with no luck: https://tristandunn.com/2014/01/24/rendering-svg-on-canvas/ How do I fix blurry text in my HTML5 canvas? Canvas drawing and Retina display: doable? https://www.html5rocks.com/en/tutorials/canvas/hidpi/ Now i don't know what should i do to make it better. Please look into my result: jsfiddle.net