I reduce the browser size (on my computer) and stop decreasing as soon as the color of the text changes to blue. Then I pick up my Samsung Notepad and compare the size of it with the browser’s size on the computer.
The size of the browser on the computer is wider than my Notepad, but despite this the text has not changed to blue on my Notepad.
Everything changes and works well on the computer, while I decrease (first blue, then red), but I Don’t get the same change on the other devices.
px is not a standard measure of length in the real world. It can depend on the DPI (more properly, PPI) of the monitor you’re using.
There’s a couple of possibilities that spring to mind.
1: The Samsung device is using a browser non-compliant with @media. Unlikely, but possible.
2: The Samsung device has a higher-than-expected DPI and so believes it has a width greater than 1200px.
3: You’re looking at a cached version of the webpage from before you implemented the media CSS.
Verify the @media entries are present in the source code on the samsung device. If possible, activate the javascript console on the device and issue the command window.innerWidth to it. This should tell you how wide the browser thinks it currently is.
@m_hutley has covered the main points that may cause your problem but I assume you are not using js comments in your css as that will break the media query?
//style
What’s the resolution and pixel density of your notepad and do you have it in landscape or portrait when you check?
Also as an aside please don’t use the maximum-scale=1.0 setting in the viewport meta tag as that stops people from pinching and zooming on mobile and is the number 1 annoyance of most users.
Lastly you shouldn’t be designing based on device size anyway as that is futile because there are literally hundreds of devices around all at different sizes.
The media queries should be be based on the design itself so that a media query is required at the point the design looks awkward or doesn’t fit properly. In a fluid design a few well placed media queries will cater for all devices without ever knowing a single thing about them. Basically you enter a break-point at the point that the design breaks.
No, I tried using a higher width, then it works on the Samsung device.
You are right.
I tried alert window.innerWidth on window onload, the result was 1280 on my laptop and 1250 on my Notepad, which is strange since my Notepad is almost half as narrow. What can I do? I need another layout on my Notepad that does not apply to my laptop. With the same innerwith, how can I distinguish them?
This is futile as mentioned in my last post. What are you going to do about all the other devices that are some px different to your own device but may also need a better layout. You cannot continue with this approach.
Concentrate your breakpoints on your design and not some imaginary device. Start on your desktop and close the window smaller and smaller until the design looks awkward or breaks and then that will be the point at which you add a media query. Do this all the way down to 320px wide and then you will cater for all devices.
If you have designed correctly with a fluid design then a few well chosen media queries will cater automatically for all devices. It is the only approach that will work reliably.
Yes. This is what im doing. And it needs a breakpoint at the width of 900px, not before because everthing is good up to that point. And i need this changes to apply to the Notepad that is less than 900 but it does not
You don’t seem to understand what we are saying Or at least you don’t comprehend the methods we are advocating. You will rarely use device-width as you are not interested in the device as such. The only thing that need concern you is the available width that you have to play with and how your design looks at various widths. Devices are irrelevant as far as this goes if you have followed the advice already given in previous posts.
Maybe it would be helpful if you posted screenshots of each so we can see exactly what the issue is or better still a link to the site in question. I can tell you now that you need to stop for a minute until you understand the issues we’ve been talking about.
You are not making sense here as you talk about 900px and then you talk about 1250px and 1280px. We really need to see what you are seeing otherwise we will be going around in circles. The point at which your design needs to change will be consistent throughout all devices (you can’t change it just for your notepad without changing it for every other device that is the same size as your notepad).
Either post a link to the site or post your full html and css so we can see what you have done. It may be that you have made a mistake somewhere else (or have fixed elements breaking out of your design) or have a fixed width design that hasn’t been coded effectively.
I have a style (color: red) that starts at 1200px, and as you can see it has already been applied on the laptop behind. The problem here is that it’s not being applied to the Notepad, despite that the Notepad is smaller than the starting point of the style(1200px), it should have caught the style. (Javascript returns innerwitdh 1250 for the notepad so that’s probably why)
@media screen and (max-width: 1200px) {
.menu_links {
color: red;
}
}
What I really want is that the new-added-media-style starts to applie at the following point(on the notepad):
Laptop width - (laptop width - notepad width)
Not based on the “wrong” width returned from javascript on samsung notepad(1250), because then the same style would be applied to the laptop almost at the same time because javascript returns 1280 for it.
Now I have really tried to make it clear to you, what I am trying to achieve. Hope you see a solution.
For example 1000px could measure 6 inches on one screen, 10 on another, or 20 or 40 inches on a large monitor, depending on the screen size and resolution. The physical size of one pixel can vary infinitely.
It seems you are looking for a media query that acts on the actual physical size in the real world, that is not how queries work.
Yes, you can use physical units in css such as cm, mm, etc, but for that to work any different from px or em the browser would need to know the PPI of the device which it does not.
So you are back to identifying various devices which as explained earlier is a futile approach.
No your notepad is not smaller than 1200px it is most likely 1280px in landscape mode.
You seem to not grasp what you are asking, If your design does not fit at say 1200px width then it does not fit any device at 1200px width. It makes no difference what the device is as the display will be the same at that specific width. If something fits at 1200px width it fits everywhere. Of course on tablets things may look smaller but they will still be perfectly formed.
Your screenshots were not clear and do not show what the issue is that you are experiencing. You need to clarify exactly what is wrong and how it differs from other devices at the same width. (Maybe supply two clear screenshots side by side and annotated with a description of the problem )
I will say once again “do not detect devices or device-width and do not continue with trying to second guess what width a device is”. You are doing something that is incorrect or misguided and it is not the way that responsive design is handled. The issue you think you are handling is probably a completely different issue altogether. If indeed you do hard code your media query just to match your device the chances are that you will break it everywhere else. Unless of course you have found a random bug or we are misunderstanding the problem.
Please provide a link to the site, or a working codepen or at least full html and CSS so that we can help you properly.
