Develop Reference

Difference between Android view and IOS View

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.

CSS is DIFFERENT in some Android browsers than it is in desktop browsers

I'm trying to debug a CSS-only slideshow on my Android phone. The slideshow works fine in Firefox for Android but doesn't work properly in Chrome, Brave or Samsung Internet. My phone is a Samsung A5 (2017) and my laptop is running Windows 10.
When I connect my phone to my laptop and look at the Chrome browser from my phone in Chrome Devtools via USB Debugging, I'm noticing some odd things in the CSS as rendered on the phone. The source code of the SaSS has the max-width of an element called #slideshow hard-coded as 410px:
#slideshow {
max-width: 410px;
display: block;
margin-left: auto;
margin-right: auto;
}
The precompiled CSS file is identical. However, when I look at the same block of code in Chrome on the phone, max-width is 407px, even though I uploaded it and was careful to ensure that it did upload successfully. I was also careful to reload the page in Chrome (for Android).
#slideshow {
max-width: 407px;
display: block;
margin-left: auto;
margin-right: auto; }
I even deleted the css file on the server and re-uploaded it from my laptop but the max-width still shows up as 407px. This is part of the problem because each of the images in the slideshow has a width of 408px; the max-width of #slideshow has to be greater than or equal to 408px.
But that's not the end of the weirdness. Now we get to the SaSS (mis-)calculations. I have a variable called $number_of_slides which I set to 12. Then I calculate two things. For #slides .inner, I calculate a width as 100% times the number of slides:
#slides .inner {
#debug 100 * $number_of_slides;
width: 100% * $number_of_slides;
line-height: 0
}
With $number_of_slides set to 12, the width for #slides .inner should obviously be 1200% and that's exactly what the css file shows:
#slides .inner {
width: 1200%;
line-height: 0; }
The precompiler also shows a value of 1200% from the #debug statement.
But when I look at the CSS that's been rendered on the phone via Chrome DevTools, the width for #slides .inner shows a width of 1100%!
#slides .inner {
width: 1100%;
line-height: 0; }
The other calculation that uses $number_of_slides is this one:
#slides article {
#debug 100 / $number_of_slides;
width: 100% / $number_of_slides;
float: left
}
The CSS file shows that the precompiler has done the right thing:
#slides article {
width: 8.3333333333%;
float: left; }
The #debug statement confirms that the width is being correctly calculated as 8.333333333% by the precompiler.
However, when I look at that same selector in the CSS on the phone, I get this:
#slides article {
width: 9.0909090909%;
float: left; }
I am completely baffled. I can't think of any mechanism that would explain this odd behaviour. A hard-coded value and two calculated values are DIFFERENT between Chrome on my phone and Chrome on my laptop for no obvious reason even though there is just a single version of the file being used by both browsers.
When I manually edit the CSS file on my phone, the slideshow renders much better in Chrome although not yet perfectly, so there are probably additional alterations to the CSS file that I haven't noticed yet.
Can anyone suggest WHY the CSS file on my phone is different from the CSS file on my laptop? If I can keep it from changing, perhaps I can solve the whole problem in one go.
I'm using a current version of FileZilla to do my uploads.

How to deal with multiple devices in this particular situation?

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.

SVG rendering issue in Android Browser

In the default Android Browser for older Android versions (4.1, maybe 4.2/4.3 [It is on the Android device of a customer, i'm not exactly sure which version he uses]) SVG sprites are not rendered correctly.
Instead of showing the correct clipping with the correct size, the browser shows a smaller version of the image, showing the whole sprite, like in the screenshot below (Android Browser 4.1):
Android screenshot (false rendering)
it should look like this:
Android screenshot (correct rendering)
Here's the CSS for the sprites:
.sprite {
display: inline-block;
background-image: url('img/sprite.svg');
background-repeat: no-repeat;
background-size: 1000px 1000px;
overflow: hidden;
color: transparent !important;
}
.sprite.logo {
width: 270px;
height: 55px;
background-position: 0 0;
display: block;
}
[...]
Every other Browser (including Android Browser 4.4) shows everything correctly.

This issue exists on Android 4.3- and IE9. To solve this, simply specify width and height attributes for svg tag in you file.

border-radius not working in modern native 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