I am testing this website on iPad and have discovered that it displays differently on Chrome for iPad than it does on Nexus 7 Chrome.
Screenshot of Chrome for iPad:
Screenshot of Chrome for Android:
does anyone know why this happens only on the ipad? I had also confirmed this same behavior for iphone so am assuming this an idevice issue.
Needed to add -webkit-justify-content to the css.
Related
I created a simple HTML page that displays the problem.
With Chrome desktop version is okay but trying on different mobile device and with different browsers it becomes obvious that there is a bug.
Scrolling down, in my example with Samsung S6 and Chrome, appear a white band on the bottom of the screen that disappears after less than one second.
I believe this problem is generated from the header of Chrome (or browser you use) that disappears when you scroll down.
I created an example JSFiddle and loaded the HTML page on my server.
On the web I did not find answers to my question, I hope someone is able to help me.
Thank you all in advance.
Tests performed (and failed) with:
Samsung S6 and Chrome
Samsung S6 and Samsung Browser
IPhone 6S and Safari
LG G4 and Chrome
LG G4 and LG Browser
We have programmed a site at: http://tcsdesignreno.com/zing-cards/ to be responsive. Whenever I check it in online responsive design test sites (such as: http://mattkersley.com/responsive/ or http://beta.screenqueri.es/) it looks fine but if I bring it up on my HTC Sensation, iPhone 5 or a Galaxy 3 it cuts off the right side of the screen. I have used the standard web browsers and chrome on the phones. I am not sure how to check the CSS on my phone to see what the problem is.
Does anyone have any suggestions on either how to fix the site or how to find the error from my phone?
You can debug Android's Chrome Browser from your computer; details at this link.
My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/
You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Try removing the fixed background on the body element.
Visit a webpage that uses a navbar that's fixed to the top using an Android device.
Example 1: The Next Web
Example 2: A test page I built (You'll have to scroll down a little bit to get fixed navbars)
Is it only me, or does anyone else see the navbar "jitter" when you scroll the page? Is there anything you can do to fix it? I see the issue on my Samsung Galaxy S3 running Jelly Bean with Chrome, Dolphin Browser HD, and the stock browser. For some reason, I cannot replicate the issue with my Asus Transformer TF101 tablet.
I've got an issue that I'm trying to get to the bottom of and I can't seem to find an appropriate answer. Our mobile website - currently in test - uses a 3D Secure iframe.
Our tests have confirmed that where the iframe displays properly when using an Android phone (in-built webkit-based browser, Samsung Galaxy S II), it unfortunately does not for an iPhone (again, in-build webkit-based browser, Apple iPhone 4S). The iPhone simply does not display the iframe. I'm uncertain whether the iframe won't show or if it is merely positioned off-screen (but there are no CSS properties applied to either the iframe or parent that would affect its position/float/margins/padding).
Is there a major difference between two webkit-based browsers on different phones which would account for this? Has anyone suffered from the same issue? And if you can help, how do I try to solve it?
<iframe id="authenticationFrame" name="authenticationFrame" src="3d-secure-bit" height="400" width="330"></iframe>
Thanks,