Im creating a responsive site and i didn't understand why my document width is 980px, even tho im in braves inspector tool with a responsive size of 428x807. If i set a media query like this:
#media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
Should this not say that if the screen is less than 576px its supposed to be colored blue? How come the inspector and the actual size of document is different?
There is a special mate tag to force browsers, in particular mobile ones, to be real about their viewport widths. This tag is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and should be included in the head of your document. Historically mobile devices would pretend to have desktop sizes since websites weren't expected at all to be rendered at such small screen sizes when mobile devices were first popularised. We are talking about the blackberry era here and it was deemed more appropriate to render a website extremely zoomed out on mobile so that you could zoom in as needed and at least see all the content as intended. I hope this is your problem because otherwise I can't think of another explanation.
Related
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I want to make my page act just like facebook! if you try to display facebook in a mobile phone width it will stay the same as in the computer width! see the picture link :
https://imgur.com/a/uLqtrLS
but I want the responsive to be active for big widths ! I mean that if I display on a 1600px width computer it will fit in it the same thing for TV.
but not for mobile devices.
I have already used media queries but I want the width of mobile devices look the same as the computer width
I believe you're looking for the CSS media query:
#media screen and (min-width: 480px) {
/*CSS if screen size >= 480px*/
}
You also should use the <meta name="viewport" content="width=device-width, initial-scale=1"> tag in the <head> of a page to tell mobile browsers not to change the page to fit the screen.
Websites like facebook is using headers to define the user device. If you see it in desktop and resize it. It does not change the view so much. But if you refresh the page it redirects you to another page https://m.facebook.com so. All you have to do is to design multiple views with fixed width.
I have this simple HTML generated from React
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>
When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the
This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?
What you're looking for is the #media selector. You read more about it here.
At the bottom of your code (or anywhere you like, but it's bet to put it at the bottom), you'd add
#media only screen and (max-width: ##px) {
}
Where you see "##", you'd put the max-width of the phone screens you're trying to display code in.
On the inside of the brackets, you can rewrite your entire website to fit specifically to a phone (and it'd only show up on a phone with a max-width of ##px or less), or you can simply edit one thing, such as the font-size in this post.
Say for instance in your primary post you had
.desktop {
font-size: 30px;
}
For phone, you'd put
#media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}
I hope this helps out! If so, don't forget to upvote and mark as acceptable.
Found the solution here, simply adding meta tag for viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
There are pages in the website that require reworking, such as converting everything to a single vertical column for mobile screens. In the React Native EditScreenInfo title_uri, I added a query string: mob=yes. The value isn't important, but the server code uses it to determine if it's called from a mobile device. So the server code determines which layout is to be used. I also used JavaScript to make the text as big as possible in the various tags for mobile.
I have to work on a project that needs to be responsive. It's the first time I'm doing this and I'm stuck with a (possibly stupid) question.
Let's say I have this very simple page :
<!DOCTYPE html>
<html>
<head>
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
As expected, text font-size is 1em (i.e. 18px in this particular case) on all devices. And, still ok, it looks bigger on a larger device (I'm comparing with an Android phone, an iPhone and an Android tablet) : it looks the same on both phones, bigger on the tablet. So far so good.
But if I add the <meta name="viewport"> line in my code, like this :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
</style>
</head>
<body >
<div style="font-size:1em;">
SOME TEXT TO CHECK IF EVERYTHING'S OK
</div>
</body>
</html>
Now the text looks the same size on all devices, which it shouldn't, to my understanding.
So, first question is: am I trying to do the right thing or not?
And if I am: how can I get the behaviour I'm looking for?
Thanks!
From Google's PageSpeed Insights article on cross-device font-size legibility:
Some mobile browsers may attempt to scale fonts for pages without a properly configured viewport. This scaling behavior varies between browsers and should not be relied upon to deliver legible fonts on mobile devices.
I think the scaling you're noticing on some devices may be a product of the browser's attempt to make pages designed exclusively for large-screen, desktop viewing more accessible on mobile devices. When you add the properly configured viewport meta tag, the browser deems that this website is already designed for to accommodate different screen sizes and that it doesn't need to take the extra step to scale text for legibility.
First and foremost, please do continue to properly configure your viewport, carefully considering the increasingly common advice that you should avoid minimum-scale, maximum-scale, and user-scalable as these directives can limit or disable the user's ability to zoom in and out on the content of your website, which many rely on as an accessibility tool.
If you simply want more control over how your font size changes between screen sizes and pixel densities, CSS media queries based on the width and/or height of the viewport are probably going to be your best bet. For example:
#media all {
/* sets the base font size for all user agents that support media queries */
html {
font-size: 18px;
}
}
#media screen and (min-width: 480px) {
/* sets a larger base font size for viewports with a minimum with of 480px, e.g. tablets, desktops, jumbotrons, etc. */
html {
font-size: 24px;
}
}
If you're worried about the proportional aesthetic of text size across devices (e.g. does the header text occupy too much of the viewport on smartphones), you might try using viewport units (specifically vmin) to force the text to scale proportionally with the size of the viewport. Be warned, though, that not all browsers support viewport units consistently. Also, please be mindful of your users' legibility needs, and use this approach sparingly, as text is designed to flow and scale fluidly for a reason, and forcing a block of text to fit within the viewport like a billboard can hinder the readability of your text for users of varying devices and/or eyeballs.
try to set font-size: 2.5vw; %)
for additional look https://css-tricks.com/viewport-sized-typography/
PS: recommend only with css media for mobile )
I am building a responsive website which will be running on smartphones like iPhone having high pixel density screens. I know that in order to maintain legibility, mobile phones' browsers report a resolution half that of actual screen resolution.
I searched about this and found that this behavior can be controlled by using css media query of device pixel ratio (for e.g. #media screen and (-webkit-min-device-pixel-ratio: 2) ) for iPhone.
I tried using this by putting my entire css code within this block, but my iPhone still displayed the page exactly as it was displaying it without using this media query.
How can I force iPhone and other high pixel density mobile phones to display my webpage at its actual resolution? i.e. for iPhone 5, it should display my webpage at 640px*1136px and not 320px*568px as it is now showing. I know that this will make my text appear smaller, but I still wish to format my webpage like that.
I am using the following meta code in my HTML:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Thanks.
Putting your CSS rules in the media query doesn't affect how the browser renders it, if you don't change the CSS rules. You could try with something like this:
.element {
width: 100px;
}
#media -webkit-device-min-pixel-ratio: 2 {
.element {
width: 200px;
}
}
Basically you can explicitly double the size when the device pixel ratio is double. Unfortunately with this technique you have to use a different media query with different sizes for all possible pixel ratio that you have to deal with.
Otherwise you can play with the width attribute of the viewport meta tag. If your page has a fixed-width layout, you can set its width as viewport width. For example if you have use a "standard" with of 960px, you can use the following meta tag:
<meta name="viewport" content="width=960px">