What are the media queries for this devices

HTML & CSS
1

Hi what is the media queries for these devices samsung (s5,s4,grand prime, all samsung devices) ?

Thank you.

2

From a CSS and RWD standpoint, a good website is one that is essentially ‘device-agnostic’ and does not attempt to pander to each individual device width. Targeting the specific breakpoints for different ‘types’ of devices (e.g. tablets or mobile devices) is achieved by focusing on how the content displays at certain viewport widths and then making changes with media queries as appropriate. So the device does not dictate the breakpoint, the layout and content does, and ultimately this will produce the best results; both from your perspective and for your users.

Do not design with specific devices in mind. Do not follow the methodology of designing for specific devices. Don’t do queries based on devices.

Read hte article please.

3

Thank you I’ll be back…by the way how do you test your web site if you don’t have devices ?

Thank you.

4

Some browsers have emulation modes. Or you can simply resize the browser window.

1 Like
5

Take your browser, drag it smaller / bigger. Now you know if your website is fully responsive

*Should probably still test in some devices via browserstack.com or other emulations, but as far as “how it’ll appear”, 99% of the time, it’ll be exactly the way it is if you just drag your browser small enough.

1 Like
6

By resizing the screen size of your browser :slight_smile:

7

Ok, so how do I know that when we resizing the browser is the screen size of the device fore example S5

Thank you.

8

Don’t worry about that. Resize your browser via dragging. Do you like the display in all sizes? Good - that’s all you need.

You’re still in the mindset of trying to make specific devices look good. Just get it looking perfect in all views when you resize your browser, and whatever the s5 gets, you know it’ll look perfect anyway.

9

It is easier than that… When your design looks crap, that’s the limit that you need to take into consideration. The size of the device itself doesn’t matter.

1 Like
10

Thank you. I have some problem when I resize my browser my menu looks fine in browser when I resize it.but when I viewed on the phone, the menu is getting smaller (the menu text ). I need to double tap the screen so that it will zoom. why is that ?

Thank you

11

Do you have this line of code in your <head> section?

<meta name="viewport" content="width=device-width,initial-scale=1">

Did you read my article yet? You probably aren’t set up to be resonsive yet.

1 Like
12

I see now, yes I am reading your article, you are great.

Thank you I’ll be back.

13

Is it okay to test in firefox ctrl +shift+ M ? it brings up the responsive design view. is this okay ?

14

It’s not 100% sure-thing but that’s OK for the most part.

15

I find it useful in that it displays the screen size as you alter it, so you can identify the break points to add your media query. But it does have some annoying quirks.

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.