I created website with responsive menu for PC-browser and Android-browser for Samsung S5 using
#media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
Menu works only on PC. When website is running on mobile browser (native and chrome also) then .menu block seems to get wanted size but is still invisible, although there is no display: none.
I used z-index for solving my problem but nothing happend and still i can't find bug. When .content display is set on hide, then .menu looks ok. Div .menu seems to be underside(?) of .content but if does, then why z-index doesn't work correctly?
This is this site Website. Can somebody check that issue?
I found problem. Height of .navigator was set on 3em. Div .menu was inside .navitagor
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 know that the question may cause confusing, but I am having problems with my CSS #media queries, specially with the screen orientation.
I have this on the <head> of my page:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
And a simple CSS #media queries that changes a style of an element when the screen is portrait:
#media screen and (orientation: portrait) {
#login_container {
width: 60%;
}
}
So the problem is when I press on an <input type="text">, [It is happening to me only on Android devices] and when the keyboard is opened for write with it, the browser recognizes my screen as landscape so my CSS #media queries is applying styles for landscape screens.
But the weird thing about everything is that it only happens when the <input> is type="text" or type="password", if not, the problem doesn´t happens.
I suppose that it is happening becouse when the keyboard is opened it resizes the browser window to other size, that (on some devices) is recognized as landscape, becouse window width is greater than window height.
I have been searching for a while on Google to find a solution, but I am unable to know how to fix it.
Thanks for any help!
Sorry I can't comment yet, but have you tried to set a #media query with px instead of portrait / landscape ?
I am pretty sure that your problem is, as you said, the size of your screen device, when the keyborad is opened, result as a calculation of with / height it becomes as portrait for your browser's point of view...
I asume it doesn't happen the same on a bigger screen smarthphones nor tablets, nevermind which browser is used. At least you could give it a chance and try it to clarify your doubt :)
So I'm setting up something extremely simple: a webpage with two containers and one sign-up form. The containers are otherwise empty, except for a background image set and configured with CSS. I'm trying to get this webpage to respond differently based on screen sizes with media queries, and for my desktop, it works fine; when I resize the page to (for example) anything below 720px, the background images in the containers adjust accordingly and predictably. Here's where the problem begins: it doesn't respond on my mobile device.
I'm using the Galaxy S3 as my starting point. Its resolution is 720x1280px. But it seems as though the media query is having no effect on the mobile browser.
Here's how it appears on desktops and laptops:
#header {
width:100%;
height:100%;
background-color:#000000;
background:url(".../header.jpg") no-repeat fixed;
background-size:contain;
background-position:center;
}
Here's the media query configured for the Samsung Galaxy S3:
#media only screen and (max-height: 720px) and (-webkit-device-pixel-ratio: 2) {
#header {
width:100%;
height:100%;
background-color:#000000;
background:url(".../header.jpg") no-repeat fixed;
background-size:500px auto;
}
}
I have already added the viewport tag to my <head> but I'm still not getting the desired response from my coding. Am I doing something wrong? Should I try for another device as a benchmark?
Max-height is going to correlate with 1280px, not 720px. The default orientation of the Galaxy S3, at least in Chrome, is going to be portrait. Set max-width:720px.
I never use the keyword "only" as I had trouble getting it to work back when media queries were newer. Try a query like this:
#media screen and (max-width: 720px) and (-webkit-device-pixel-ratio: 2) {
}
Or keep it simple and do:
#media screen and (max-width: 720px){
}
BTW it's best practice not to use max-width that often. You want to start styling your smallest screen and use min-width to move up to larger screens.
And it's possible due to the pixel density that Galaxy is reporting a much smaller screen-width. It says 360px here: http://www.mydevice.io
Hey I'm having a problem with a wordpress site I'm working and for some reason the logo doesn't margin to the left on the safari for the Ipad. The media query I added doesn't effect the logo change in portrait view. It works fine with android devices and all other devices except IPAD,Can someone please help here's the link to the site, Thanks really appreciate yet.
link: www.annesub17.com
here's the code
#media (max-width: 999px){
.logo {
margin-left: -17px;
}
}
The Android browser, since 2.2, supports fixed positioning, at least under certain circumstances such as when scaling is turned off. I have a simple HTML file with no JS, but the fixed positioning on three Samsung phones I've tried is simply wrong. Instead of true fixed positioning, the header scrolls out of view then pops back into place after the scrolling is done.
This doesn't happen on the Android SDK emulator for any configuration I've tested (2.2, 2.3, 2.3 x86, 4.0.4). It also doesn't happen when using the WebView in an app on the Samsung phones: in those cases the positioning works as expected.
Is there a way to make the Samsung Android "stock" browser use real fixed positioning?
I've tested:
1. Samsung Galaxy 551, Android 2.2
2. Samsung Galaxy S, Android 2.3
3. Samsung Galaxy S II, Android 2.3
Sample code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height">
<style>
h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
p { margin-top: 36px; }
</style>
</head>
<body>
<h1>Header</h1>
<p>Long text goes here</p>
</body>
</html>
The expected behaviour is that the grey header fills the top of the screen and stays put no matter how much you scroll. On Samsung Android browsers it seems to scroll out of view then pop back into place once the scrolling is done, as if the fixed-positioning is being simulated using Javascript, which it isn't.
Edit
Judging by the comments and "answers" it seems that maybe I wasn't clear on what I need. I am looking for a meta tag or css rule/hack or javascript toggle which turns off Samsung's broken fixed-positioning and turns on the Android browser's working fixed-positioning. I am not looking for a Javascript solution that adds broken fixed-positioning to a browser that has no support whatsoever; the Samsung fixed-positioning does that already, it just looks stupid.
Maybe you could consider a different approach that doesn't require fixed positioning...
Add scrolling to the paragraph element instead of on the (default) body element. You can then position the paragraph element just under the header. This will ensure that the header always displays at the top of the page yet allowing you to scroll through the text in the paragraph.
h1 {
height: 20px;
}
p {
position: absolute;
top: 20px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
I think the best way for android 2.2 browser implement javascript.
You can find more info via this link. It is about fixed positioning in all mobile browsers.
http://bradfrostweb.com/blog/mobile/fixed-position/
In his comment to Brad Frost's article Matthew Holloway suggests a solution along the lines of Anita Foley's answer, but with a polyfill for overflow:auto, where not supported. Check it out here:
http://bradfrostweb.com/blog/mobile/fixed-position/
It's not Samsung's Android broken browser, it's Android 2.2 which has the broken support.
In general as you might know position:fixed was and in some cases still is pretty broken in many mobile devices/systems.
To answer to your question, there is no "toggle or meta tag" that will "turn on the Android browser's working fixed-positioning". If a browser doesn't have support of something, then there's no "toggle" to "switch" it. It's not a feature.
Otherwise, you can use http://cubiq.org/iscroll-4 which emulates it.
(edit: some facts)
According to http://caniuse.com/#search=position:fixed Android 2.2 and Android 2.3 have PARTIAL and not full support of position:fixed. (partial support seems buggy support)
An Android simulator is not and will never be identical to an Android native browser, as much as IETester for example is not the same as IE native (there are differences)
Motorola ATRIX 4G does NOT have Android 2.2 but Android 2.3 ( http://www.motorola.com/us/consumers/MOTOROLA-ATRIX%E2%84%A2-4G/72112,en_US,pd.html?selectedTab=tab-2&cgid=mobile-phones#tab )
You are suggesting that SAMSUNG introduces a proprietary hack or mod that breaks the otherwise working support of position fixed in the Android browser. This seems highly unlikely, regardless of the 3 above points.
The answer is actually simple: There is partial (buggy) support and your only solution is to use a javascript library that replaces or "fixes" the hole.