Develop Reference

Media query for targeting iPad

I have an issue with writing specific queries for iPad Pro and iPad which appear on google Chrome developer tools...
I cant target iPad Pro e.g.
"and (min-device-width: 768px)
and (max-device-width: 1024px)"
But it also happens to work for other resolutions like
"and (min-device-width: 1024px)
and (max-device-width: 1366px)"
Does anybody have answer as to how I write different media query rules for different iPad sizes?
Thanks a lot : )

iPads can use the -webkit-min-device-pixel-ratio query to check if the screen is retina or not. Older iPads have a -webkit-min-device-pixel-ratio value of 1. iPad 3 and above have a value of 2, while both having the same screen dimensions.
/* iPad 1, 2, Mini and Air */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1) {
}
/* iPad 3, 4 and Pro 9.7" */
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
}
CSSTricks have a great post on this to recognize all kinds of devices.

CSS do not display button on mobiles and tablets

I have a Print button on one of my pages and I would like to control when this button gets displayed because it doesn't make sense to print using your mobile phone or tablets (I think - correct me if I'm wrong).
I saw this SO question and I noticed there are overlaps in terms of the view-port widths. Which means I could potentially hide that button for low-res laptops and desktops even though they are capable of printing the page.
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
Is there a way for me to know that the user agent has the ability to print the page either via CSS or jQuery so I can control when to display the Print button?

Viewport sizing not working in ios

I have the header in my website set to be 100vh, this works great everywhere except ios. Ios blows up the image really large, and you have to scroll way down to get to the content.
I've tried height:100% but that results in no height.
Any suggestions ?
ivygarrenton.com

Browser support for vw/vh/vmin/vmax
IE 9+ Partial support,
Firefox 31+ - Supported
Chrome 31+,
Safari 7+ - Supported but has repaint issue
IOS Safari 7.1+ - Partial support
Opera - 29+
to lookup in detail refer this link
you can use jquery to set height and width instead of this one. but css is more faster than jquery for rendering UI.

The "vh" unit is buggy in iOS before version 8. You can use media queries to set the height for iPads and iPhones, like this for a Retina iPad in landscape:
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {
#header {
height: 768px;
}
}

How to stop "tel:number" links from working on desktop / tablets

This must be very common.... I apologize, but can't find a working solution here...
I'm working on a site (retrofit) and it has responsive CSS such as:
/* Refecence from responsive.css
/* crank up to 5000px to support high res monitors and TV's */
#media only screen and (min-width: 1200px) and (max-width: 5000px)
/* Portrait tablet to landscape and desktop - BROWSER SIZE 2 */
#media only screen and (min-width: 991px) and (max-width: 1200px)
/* Landscape phone to portrait tablet - BROWSER SIZE 3 */
#media only screen and (min-width: 767px) and (max-width: 991px)
/* All Mobile Sizes (devices and browser) - BROWSER SIZE 4 */
#media only screen and (max-width: 767px)
/* Landscape phones and down - BROWSER SIZE 5 */
#media (max-width: 480px)
/* iphone portrait mode - BROWSER SIZE 6 */
#media (max-width: 320px)
I'm new to this, and done quite a bit of research, but I have a couple of questions:
I have the plan to have two blocks of HTML, one hidden, and use JS or CSS to hide the appropriate block based on user being on mobile device or not.
I wish to avoid useragent, as there are way too many. By default, Android no longer parses numbers as such (as per other posts) without the 'tel:'. I tested on Nexus 5. On the other hand Firefox asks for device to use on a 'tel: 'link.
Can I use my current #media CSS blocks? If so what about retina?
OR can useragent based JS be ok somehow?
Other options, I mean what do most people do???
Help is appreciated.

After more research I settled on a Javascript library isMobile.
https://github.com/kaimallea/isMobile
It seems that many use it, so I assume it would work.
My worry is that if a new device comes up, i have to continually update this library...

responsive tables in css

I am trying to make the following jsfiddle code work. Actually all is working fine, for server side i am using ColdFusion.
the values are appearing 6 in a row. the 6 is hard-coded in ColdFusion variables, so it splits the values in 6 and then next row.
Now i want to make this a responsive so it should work with tablets and mobile devices without much pain in the a****s
Here is the fiddle i had generated
http://jsfiddle.net/9arpxvga/
This needs a help in implementation of responsive design...
A Jquery, javascript solution will also work

You're going to be hard-pressed to find an objective solution to such a broad question. So, broadly: one of the many ways to implement responsive design is to write CSS media queries, targeting various screen sizes. Here's an example snippet taken from getskeleton.com (which might be worth checking out if you need a bare-bones responsive framework to get you started)
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
#media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
#media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
#media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
#media only screen and (max-width: 479px) {}
You'd just write new CSS (or override your css) for each of the screen sizes you're trying to target. (Nest your css within the brackets after each media screen). Hope that helps.