So here is the problem I am facing: the website layout in my phone doesnt look the same as I saw on the browser with responsive viewport turned on.
I was looking at the similar questions posted on this forum like this (meta tag problem)
I am self-learning web development and working on a simple website of the game "paper, scissors, rock".
I draw the framework with HTML.
The paper, scissors and rock logos are svg injected by javascript so I can fill it with different color.
The svg styles are done in css.
The combat part would be done in javascript but now I am confused by the layout problem.
So what I expected from desktop(windows) google chrome is like this:
chrome app view
my firend's Android phone google chrome view:
android app view
but what I get from my iphone google chrome:
iphone app view
I think the css and javascript thing would not be a critical point because it works fine on desktop and android phone.
I think it would be a tag problem but I am not able to find answers others mentioned before.
I dont know if it is the difference between ios and android.
I have faced similar issues before. I had tried to create a circle button with purely css (not img or svg). It shows perfectly in desktop web browser and my friend's android phone. But it shows a ellipse on my iphone.
Here is the code I used to create the button:
HTML:
<button id="master-button" type="button" onclick="AddContent(this)">
<div class="button-cross"></div>
<div class="button-cross rotate"></div>
</button>
CSS:
#master-button{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--white);
border: none;
font-size: 50px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.button-cross{
position: absolute;
top : 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 30px;
background-color: var(--high-light-main);
}
.rotate{
transform: translate(-50%,-50%) rotate(90deg);
}
Iphone view:
iphone app view
Android:
android app view
Desktop:
desktop app view
I thought it was caused by the different programming language by android and ios. So I thought it will only shows error if I use Safari. But it turns out even I use the same browser (google chrome), it still shows difference on the screen.
Do you guys have any thought about the issue? Do any of you have faced this issue and finally have a solution on it?
Please let me know and discuss more about it. Thank you for the community.
Related
I experienced a weird bug in Android´s (6.0.1) Chrome Browser (54.0.2840.68) when it comes to text-shadow rendering with large fontsizes and blur. It was also reported to appear in MacOS Chrome although i could not reproduce it.
I condensed the problem into a small pen for further investigation:
http://codepen.io/quarkus/pen/BQaBGj
This is, in short the styled headline i am trying to render.
h1 {
font-family: sans-serif;
text-transform: uppercase;
font-size: 60px;
margin: 0;
color: white;
line-height: 1.2;
}
h1.shadow {
text-shadow: 0 0 0 transparent, 0px 0px 40px rgba(0, 0, 0, 1);
}
The classes .filter, .fix3d and .fix are just attempts to fix this problem by rendering the headlines in a 3d context (or by creating the shadow as a blurred :before).
This is how it looks an most android devices:
s.codepen.io/quarkus/debug/BQaBGj on the device
Has anyone ever experienced that kind of rendering and can point me to a solution ?
Thanks
Markus
EDIT: forgot one thing. it occurs only if the page is "scaled" either by the user itself or by stting an meta-tag like:
<meta name="viewport" content="width=device-width, initial-scale=1">
as it is in the pen.
I'm definitely getting this on Browserstack devices (Galaxy and Nexus phones), I've not seen it on a device, but I don't have tons of devices to check.
However what fixed it for me was transforming and blocking the text:
.text {
transform: translateZ(0);
display: inline-block;
}
Not an excellent fix as I need my text to display: inline but it works.
I try to test a website for different devices.
I only have a iPhone 4 and an iPad 2 to test so for the rest I use chrome to simulate devices.
I notice chrome does things really strange.
For example, on a iphone 5 preview it shows correct but the container is shown really small.
If I check for iphone 6 plus then the content is drawn way to large. Where I should see 5 rows I only see 2.
This is the same with the iphone 4 preview. But on my real device it shows ok on the iPhone.
In case it helps, this is some of the css:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#container {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
height: 100%;
}
For the client mobile functionality is a top priority. I only have no clue what I should do?
I aslo have this:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">
But with or without makes no difference.
If i test other websites with the chrome inspector then some have the same problem and some not. What could I do about this?
I'm totally lost.
The simplest possible solution: did you reload the page?
If that doesn't help: Some Websites store data relevant to the view in their cookies. Try clearing your cookies.
I have a local page in android webview, pages's html and body both has width:100%;height:100%;overflow:hidden; , and the #result-popup-wrap has the following css:
#result-popup-wrap {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 245px;
background: #fbfbfb;
border-top: 1px solid #dcd9d5;
-webkit-transform: translateY(100%);
}
but, as you see, when I scroll to bottom of the page, I can see the #result-popup-wrap, which should not be visible.
Any help is appreciated!
Just for anyone who are suffering the same problem.
ADD position:relative to the <body> tag.
Apparently, this is a bug of WebView, on both Android and iOS. On chrome of PC version, page renders OK without body{position:relative;}, but in WebView, you can scroll the entire page, including the 'hidden' #result-popup-wrap.
click here to see demo , pay attention to the UPPER comment in css
you can set body{position:fixed;top:0} to the body.
I have a mobile site with fancybox popups
I'm having problems with close button:
<a title="Close" class="fancybox-item fancybox-close" href="javascript:void(0);" id="fancyboxCloseButton"><i class="icon-remove"></i></a>
On Nexus 7 tablet with Android 4.4.4 I see the close button (X) with green color:
.fancybox-close {
position: absolute;
top: .5%;
right: 2%;
display: block;
cursor: pointer;
z-index: 8040;
background: none!important;
font-size: 150%;
color: #afd732!important;
text-decoration: none;
}
But on Samsung tablet with Android 3.1 I see green holo square.
Since it impossible to debug Android 3.1 browser.
Any ideas what it can be?
It was a font issue. Android none Chrome browser doesn't support .woff font.
I added svg font and that solved the problem.
The fancybox works fine in Android browser.
I have a page that uses border-radius. It doesn't show up rounded in the native Android browser; it shows up with square corners. It shows up rounded in desktop Chrome, IE, FF, etc fine, but not in the native phone browser. Does anyone know if this is a problem with the browser itself, some additional CSS extension that I'm not using, etc?
Here's my CSS (in the demo):
.bigButton2
{
width: 320px; height: 200px; margin: auto;
padding: 20px;
background-color: #521c0b; color: #FFFFFF;
border: 3px solid #e3b21e;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
I've set up a JSFiddle: http://jsfiddle.net/VJvQA/
I have tried with padding, without padding, with box-sizing, without box-sizing, and it just shows up as sharp corners. Any help or insight would be appreciated.
I realize that someone posted this already under (border-radius style doesn't work in android browser), but he didn't provide any code, JSFiddle, and it was incorrectly answered with a general question without any real answer; I'd downvote it if I could, but I assumed prodviding an actual well-written question would be better. Thanks!
Turns out, this issue is specific to the Android browser on the Galaxy S4 and S4 Active. It looks like they've broke support for the condensed border-radius property, but if you specify each corner individually, it works fine. I'm posting a bug report to Android. So, if you do this:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
It works fine; if you just have border-radius: 10px; it gets ignored.
This was answered under this post:
Galaxy S4 stock browser CSS3 border-radius support?
I'm just repeating it here. But I did test their solution, and it is working fine now on the Galaxy S4 Active as well.
Unfortunately, some browsers just don't support certain HTML5 and CSS3 properties. My advice and the general advice you'll find on the web is design your site so that it functions and looks nice across all browsers, and then go back and add CSS3 and HTML5 elements as an extra.
This is a well designed and laid out table showing HTML5 and CSS3 support across browsers, it doesn't, however, show the support for mobile browsers.
This link, shows support for mobile devices.
EDIT 2019-11-07
With HTML5 and CSS3 widely supported across all modern browsers dating back several years, plus many JavaScript plugins designed to provide polyfills should you need to support much older browsers, this question and my original answer are both severely outdated.
On that note, it's pretty amazing how far we've come in just 5 or so years :)
New answer: HTML5 and CSS3 all the things!
I see this on another topic.
and to work on mobile just do this:
border-collapse: separate;
with border-radius (im also try border-radius separated)
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-collapse: separate;
Tell me if works. Cya
I think your code is not wrong, it can not display on tablet devices by do. background border should have to fix this error you should delete the lines
background-color: #521c0b;
color: #FFFFFF;
or deleting row
border: 3px solid red
I think this is not a bug and I've met a lot of work as above :)
p / s: sorry my english is not very good