I have a question regarding Dreamweaver CS6's implementation of responsive design. If i were to use the default media query settings (phone=480px wide, tablet=768px wide, and desktop=1232px wide), what will happen when viewing the site on a retina ipad?
The retina ipad has a width of 1536px, but it's a tablet. Will the site built with CS6's Fluid Grid show up using desktop site media query?
My question also applies to the Droid DNA. It has a width of 1080px, but it's a phone. Will the site built with CS6's Fluid Grid show up as a tablet site on the Droid DNA?
Does Dreamweaver take all of this into account? I know that there is a way to use pixel ratios as parts of a media queries, but will that be needed for a site made with CS6's fluid grid layout?
You have to remember that pixel is not an absolute unit. It's relative like percent, em, rem...
So the retina display has a higher dpi (dots per inch) value but should be recognized as tablet since Apple knows this too.
Related
I have a website designed using Figma. Now I would like to develop a website in Wordpress using Elementor plugin based on the Figma design. Designing using Elementor is ok.
However, the design is based on 1920 width wide screen and I am developing the website on smaller desktop (say 1440 wide).
Now, everything looks big (icons, padding, width, height, etc...) on the screen I developed because I am following the px scale according to Figma design.
Is there a way that I can convert to equivalent of scale in Figma. I would like to ask for help from experience developers who knows this issue.
Thanks
While your Figma frame can be 1920px in width, it's recommended your actual content is set at 1366px. The rest can be left as white space.
That's it, there's no pixel ratio you have to worry about. Yes Figma will not be 100% as HTML/CSS, but the width/height px values are the same.
So start tightening everything to fit in 1366px in width and you're set.
Client want the subject.
I have psd for a different screen sizes (mobile, tablet and desktop), but I not allowed simply use media queries, because in between those sizes content should be the same as in the psd.
I tried using script that would change root font-size, based on window.innerWidth and innerHeight, so I could just use em to scale everything, but had consistent results on all browsers and platforms.
So what is a best way to do responsive pixel perfect markup?
I like to use Firefox 'Responsive Design View' to emulate multiple mobile devices on my desktop. But I'm in doubt about one thing.
As far as I understand iPhone with Retina use 2 physical pixels per one CSS pixel. And Firefox 'Responsive Design View' do not. That mean that if I want to emulate iPhone 4 screen with resolution 960x640 I actually should use FF RDV preset 480x320 (and add preset 568x320 for iPhone 5). Right?
You're right that you should use the 480x320 viewport size, as all sizing measurements are based on logical pixels not the screen's physical pixels.
If you want to thoroughly test the site for retina content, and you don't have a retina screen, change the value of layout.css.devPixelsPerPx in the about:config page to 2. -1 is default. Note the UI will all look huge, but this will properly kick in pixels per px media queries, etc.
I just tried the devPixelsPerPx tweak along with RDV, and it works well - RDV looks like a great tool!
I am building a Phonegap application with two layouts: one for 'handhelds' and one for 'tablets.' I want devices larger than 6 inches to display the tablet layout and smaller devices to use the handheld layout.
I've looked into media queries. My concern is that if I target a device by pixel size, for example iPad1 768px, a high-density handheld will come along that also qualifies for this query, showing the wrong layout and making the text unreadable and the widgets too small. I've considered webkit-min-device-pixel-ratio > 2 for this query, but doesn't that leave 'gaps' where an unfortunate combination of resolution and pixel ratio triggers the tablet template on a handheld device?
So, what is a general strategy I could follow to reliably 'pick one' of these two layouts (and avoid overlaps between devices) when the device loads? I am only supporting portrait mode and I can change all CSS, JS, <meta name="viewport"> etc..
Essentially, I'd like to be able to come up with some rules to differentiate between columns 2 and 3 here http://nmsdvid.com/snippets, but without targeting specific device models.
Thanks!
I think pixel width in media queries are still standard width, all current iphones display a document width of 320px. This is as the UIwebview used in phonegap is just a standard browser environment.
My css needs depend on the amount of cross over between my iphone and Ipad versions of my app. If the css is almost the same I will just have extra css for Ipad devices in the one CSS file using a media query, otherwise I will have a different file for each.
I've been using min-width: 600px as my breakpoint in my CSS media queries. My rationale was that at 600px and above I'd capture tablet devices (Kindle Fire, iPad, etc) and below 600px would capture all of phone devices.
It turns out that while the iPhone plays nice by doubling its pixels, but still reporting being 320px x 480px, there are a ton of Android phones out there with resolutions like 700px x 1280px. The trouble is, how do I capture these devices without giving them a tablet-like interface?
Normally I'd just let the content respond to the pixel resolution of the device, however, a 1280px layout on a 4.3in screen just doesn't look right, especially since my application deals with a lot of form elements, which on a phone you want to span the entire width, but on a tablet or desktop you do not.
One good option is to tailor your media queries to your content, not arbitrary device pixel sizes, by using ems.
Please use responsive css framework to avoid this kind of problem. I would suggest using Foundation or Twitter Bootstrap