After searching through related questions, I'm still unable to get media queries to work for my site (in progress):
http://codemusings.net/
I first ensured that my site validates as valid HTML5. I'm also using the <meta> tag with name="viewport":
<meta name="viewport" content="width=device-width,initial-scale=1">
Using help from related questions here, I went to http://mediaqueriestest.com/, which reports my Samsung Galaxy S4 as having a device-width of 640px.
I'm using a separate style sheet in which to overwrite style rules in the main style sheet.
<link rel='stylesheet' type='text/css' href='style/main.css'>
<link rel='stylesheet' type='text/css' href='style/mobile.css' media='only screen and (device-width: 640px)'>
Inside mobile.css:
nav {
float: none;
width: 50%;
}
main {
float: none;
width: 90%;
}
.section {
background: none;
}
To ensure that the problem wasn't with clients fetching the style sheets in the wrong order, I tried appending a media query to my main CSS style sheet:
#media screen only and (device-width: 640px) {
html { color: red; }
}
However, this didn't work either. I've been specifying device-width: 640px in an attempt to just ensure my mobile CSS works right, but my overall goal is to reliably load different CSS for all smart phones and tablets.
I should also note I'm using Chrome on my Galaxy S4.
try with i think this should work
#media only screen and (max-device-width: 640px) {
html { color: red; }
}
Related
The problem is happening on Chrome/Android and possibly Chrome on other mobile devices. I have only been able to test it on a Nexus 5x so far. I am using Handlebars.js to dynamically display quotes inside paragraph tags. Whenever the displayed quote is less than three lines, the font-size shrinks. I am having a difficult time debugging this font sizing issue because it only seems to be happening on Chrome for Mobile. The issue does not replicate in Chrome dev tools responsive mode. The font resizing does not happen in IOS Safari or Firefox Mobile.
If you have Chrome on a mobile device would you please have a run through of the game and see if you notice the issue? LINK HERE
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
Here is the code for that section of the site (link to repository):
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p {
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
<div id="game-screen">
<div id="game-pictures">
</div>
<div id="game-quotes">
<h6 class="center">Quote {{counter}}/10</h6>
<p>"{{content}}"</p>
</div>
</div>
Does anyone have an idea of what might be causing this font-resizing?
Thanks in advance if you can offer any help.
Link to Repository
Edit: Thanks to all of you who helped me!
For cross compatibility for my web pages I tend to use the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This seems to work with no additional styling with CSS needed for the mobile platforms. Not sure if it what you want though.
Can you check if your Chrome font size is at 100% in settings on your phone? Chrome for Android has an option to render font at a different value. You can find this option in: Menu -> Settings -> Accessibility. I did a mistake like this some weeks ago and I want to be sure that is not the case here. Sorry if I'm out of the line here.
I also found that for some unknown reason sometimes Chrome for Android set this font setting wrong at installation time. I could not replicate this behavior but I got one phone, of a relative, with this so it might be possible that you are not aware of the fact that this setting is not set at 100%.
i added a * after your paragraph selector to selects all the paragraph's. maybe this will solve your problem. please tell me if it worked, i wanna know the outcome :)
#game-screen {
margin-top: 2%;
#media (max-width: 550px) {
margin-top: 4%;
}
#game-quotes {
width: 90%;
margin: 0 auto;
#media (max-width: 550px) {
width: 95%;
}
p *{
font-size: 3.6rem;
#media (max-width: 750px) {
font-size: 2.4rem;
}
#media (max-width: 550px) {
font-size: 1.4rem;
}
}
}
}
I'm not sure if this is the answer to your question but I find this consistent for CSS:
body {
/** Setting the 'font-size' property of the <body> to 62.5%
* allows you to use the 'em' measurement as you would in 'px' form.
* ...hope that's clear.
*/
font-size: 62.5%;
}
#someDivInBody {
font-size: 1.65em; /* or '16.5px' by CSS */
}
This method has allows me to use the em measurement as I would in px but with more consistency and control.
The rem unit is unlike px or em.
When you resize the window, using rem will keep the ratio of the text and the window size the same.
Try using em or px to resolve the issue :)
This may be because of the resolution of the phone or tablet. It may be best to customize your webpage to stay the same size, no matter the device.
try using max-width:Resolution;
You will have to apply this to the body class for this to apply to everything.
I.E.
`.body {`<br>
` max-width: 3840px;` /*4K resolution, for 4K displays*/
This SHOULD fix the text issue. If not, please refer to https://www.w3schools.com or https://developer.mozilla.org/en-US/. it may be able to help you.
I have experienced this same issue and it's very annoying. I filed a bug for Chrome (see details here: https://bugs.chromium.org/p/chromium/issues/detail?id=877833#c9) and they basically said it wasn't worth it to them to fix it. In my case, as suggested by #Cheesy, my android's accessiblity was set to larger than standard font size. That does not invalidate the issue, IMO. If large font size makes ALL font larger great. But it should not inconsistently be resizing font in some places on the page while ignoring others.
The only way to fix this for my React application was using this CSS rule:
* {
max-height: 999999px;
}
I have no idea why this works.
It was an extremely specific issue that I had with my Samsung Note 8 and nothing else worked.
I also tried different meta tags combinations and all possible text-size-adjust values, nothing worked but this.
Hopes this helps someone from diving into this rabbit hole that I just came out of.
For me, I had to include minimum-scale in the meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
I'm testing my website on mobile devices, but, while on iOS it works great, on Android it doesn't: the site is zoomed in and it is unresponsive.
In my tag I have:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
while in my CSS there is:
#media only screen and (min-width: 979px) {
.isStuck {
background-color: #000;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.15);
}
}
#media only screen and (max-width: 979px) {
#stuck_container {
position: relative !important;
box-shadow: none;
}
.pseudoStickyBlock {
height: 0 !important;
}
}
The Android stock browser changed extensively as of Android 4.4, so if limiting your application to that version is possible, you may find it works fine, according to a Google code issue here.
I would advise targeting handheld rather than screen however, as many mobile devices identify themselves as being handheld devices.
#media handheld, screen and (min-width: 979px) { ... }
A previous question also suggested targeting the device resolution instead.
Basically, on a Nexus 7 when the font-size changes on the HTML element it's ignored. If I remove the smaller font size everything works as intended, but this adds it's own issues for phones.
CSS:
html { font-size: 10px; }
#media (min-width: 600px) and (max-aspect-ratio: 21/15), (min-width: 768px) {
html { font-size: 16px; }
}
It works if I remove the first line so the media query isn't the issue. Anyone have any ideas or come across this?
My only theory so far is it might be a bug with WebViews (this is currently in a web view).
I was able to work around this by adding an additional catch-all #media query and not specifying font-size outside of the #media queries.
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
I have noticed that JQuery Mobile in phonegap is working fine for iphone . But when I run similar application on android especially Ldpi(320X240) it is not working properly.Images such as buttons are pixeleted. Any help on this is highly apperciated.
Thanks in adv
In android apps you can provide multiple bitmaps for each screen density in res/drawable-ldpi res/drawable-hdpi, etc...
But it won't work here, because phonegap will load bitmap from asset folder. But you can do exactly as android does in your webpage using css3 media queries.
exemple:
for a 100px image name it btn-mdpi.png,
create a 75px image naming it btn-ldpi.png,
create a 150px image naming it btn-hdpi.png,
then create a 200px image naming it btn-xhdpi.png
here is the <head> of your webpage:
<head>
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
<style>
input {
background: transparent url(btn-mdpi.png);
height: 100px;
}
#media screen and (-webkit-max-device-pixel-ratio:0.75) {
input {
background: transparent url(assets/btn-ldpi.png);
height: 75px;
}
}
#media screen and (-webkit-max-device-pixel-ratio:1.0) {
input {
background: transparent url(assets/btn-mdpi.png);
height: 100px;
}
}
#media screen and (-webkit-max-device-pixel-ratio:1.5) {
input {
background: transparent url(assets/btn-hdpi.png);
height: 150px;
}
}
#media screen and (-webkit-max-device-pixel-ratio:2.0) {
input {
background: transparent url(assets/btn-xhpi.png);
height: 200px;
}
}
</style>
</head>
For each density, a different bitmap will be used matching the screen density. And good news it will also work for iphone 4+ and its retina display!
You can read this old romain nurik post to learn more about it: http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui