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.
Related
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.
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.
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've written a new post to my blog and the page looks fine in all browsers, except Chrome for Android 4.4.4 (KitKat). Update: didn't work for Android Marshmallow too.
The only different thing this particular post has is a scrollable table, styled on a custom stylesheet:
.article_body table {
width: 100%;
}
#media screen and (max-width: 479px) {
.article_body table {
width: auto;
display: block;
overflow: auto;
overflow-x: scroll;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
clear: both;
-webkit-overflow-scrolling:touch;
touch-action: auto;
-ms-touch-action: auto;
}
}
The table is scrollable in all browsers, except Chrome on Android. But the most important thing is that the post is showing a white block from some point on, until the end of the post, as shown on the screenshots below:
Beginning of the error
End of the error:
TESTS:
PC, Win 7 (IE 11, Chrome, Firefox) - OK
iPhone, iOS 9.3.1 (Chrome and Safari) - OK
Windows Phone (IE) - OK
Moto G - Mozilla Firefox - OK
Moto G - Google Chrome - failed (portrait only)
All the other posts within my blog are ok on all these browsers.
CSS test:
After some tests I've found out the error relies on display:block;.
If I change or remove this property, the white block disappears on Chrome, but the layout is awful in all other browsers.
What should I do to fix this?!
Blog post: http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html
Android version: Android 4.4.4; XT1032 Build/KXB21.14-L1.40
Chrome: 49.0.2623.105
I found the problem for the white area. It lies in the animate.css Change the following line;
<div class="header-color col-sm-9 col-sm-offset-3 animated fadeIn">
Into this:
<div class="header-color col-sm-9 col-sm-offset-3">
I suspect that the transition (fadein), which has a 2000px value in it, is the one causing the problem with the white space/cut off.
You can probably also multiply this value by 10 to solve this problem.
Well, thanks to #JoostS insights I managed to fix this annoying error myself with this #media query for Chrome only:
/* #media queries for Chrome 29+ only */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) and (max-width: 479px) {
.fadeIn {
display: initial;
margin-left: 5% !important;
}
article {
padding-left: 5%;
padding-right: 5%;
}
}
See https://gitlab.com/snippets/17238 for more Chrome media queries.
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