-1

I want to know how i can style ipad and not ipad pro.

My interface is responsive on ipad pro and not on ipad ( i checked using the chrome console).

But when i use this query 

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)

It affects the ipad pro which is already responsive.

How can i solve this issue by only applying the query to just ipad

Griezmann
  • 45
  • 1
  • 8
  • Which iPad? My question alone tells you why any attempt to answer the question is doomed to fail or be overly difficult and time consuming. – Rob Dec 22 '17 at 13:18
  • You can not focus media queries to any *specific* device type; because what defines these devices can be used by other devices, or can be changed in device updates, or simply be absent (`null`) values. Therefore this question can not be answered. – Martin Dec 22 '17 at 13:26

2 Answers2

0

You can try by mentioning min-width and max-width on media query in order to get affected on ipad device.

@media screen and (max-width: 768px) and (min-width: 360px) {}
Subash
  • 668
  • 7
  • 17
0

TL;DR

You can not focus media queries to any specific device type; because what defines these devices can be used by other devices, or can be changed in device updates, or simply be absent (null) values.

How can I solve this issue by only applying the query to just iPad (not pro)

Therefore this question can not be answered.

Explained

Various questions on here ask the same thing and the answers are all "screen resolution" based; so you can detect what resolution the screen is at, and set styles accordingly. (such as other answers to this very question)

But; other devices or desktop browsers at a certain screen size will be easily able to implement these screen sizes and to "trick" the CSS into displaying output itended for another media.

Also devices can be detected with the USER_AGENT string, but this can not be trusted at all, and is often faked such as by versions of Safari, or Firefox Mobile view, or various other simple to use tools.

All the available data that can tell a website if a device is a certain make or model is HIGHLY UNTRUSTWORTHY. And this lack of trustability increases as your specifications increase; as you want a specific type of IPad device, you can develop something using Javascript but this will be CONSIDERABLY INACCURATE.

Remember:

You can never be certain as to what type of device is viewing your remote content.

Ok, so you don't want to leave here empty handed

I understand, you can't take no for an answer.... so here are some useful links which will give you some scope for checking broad level attributes you are searching for.

Please note that these all suffer the vaguries and inconsistencies mentioned above:

You should have already read these before asking this question.

Community
  • 1
  • 1
Martin
  • 19,815
  • 6
  • 53
  • 104