Separate mobile version for tablet and separate for phone?

Question

Mobile development

Hello. I'm setting up a blog. With sizes from 1400, it consists of 3 blocks (2 sidebars and content in the center). With sizes from 1000 to 1400 - 2 blocks (content and sidebar). With sizes from 480 to 999 - 1 block (content with sidebar together). There are 3 versions of the site: large, medium and small. Large and medium will belong to the desktop, and small to mobile phones. But I have a problem. Medium version of the site: It is suitable for both PC and tablet, but the tablet is also a mobile device, and the "smart" guys from Cupertino made a phone with fullHD (1920x1080), which is more than most tablets (tablets)! !! And now I have to suffer. Okay, if we only had phones and a PC, then I would make a medium and large version for the PC, and for the phone I would make a small one, then on iphone 6 plus and on iphone 4 the picture would look the same. But the small version on the same galaxy tab 10 looks dumb, and the medium one looks fine there. Tell me how to get out of the situation?

Answer 1

Use media features for devices — device-width, device-height, orientation, device-aspect-ratio
iPhone 6+
media only screen
and (device-width : 414px)
and (device-height : 736px)
and (orientation : landscape)
and (device-aspect-ratio: 736/414) { }
media only screen
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (device-aspect-ratio: 736/414) { }
ipad
media only screen
and (device-width : 768px)
and (device-height : 1024px)
and (orientation : landscape) { }
media only screen
and (device-width : 768px)
and (device-height : 1024px)
and (orientation : portrait) { }