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.
Related
I have an HTML page which is displayed correctly in all devices and all browser except the stock Android browser in Xperia Z.
On this particular device running Android 4.2.2, I am using jQuery v1.7.2, and using $('div').slideUp and $('div').slideDown methods only, and it results in text distortion (it is in English, so I suppose it is not related to any specific font), the text appears as horizontal lines as they would appear for a fraction of a second while sliding up/ down.
I have tried turning the debug mode ON by about:debug in the stock browser, and the javascript console shows no error/ warning messages.
I tried changing the user agent string to iPhone, and to my surprise, the text is rendered as expected.
I have searched for similar issue, and came across Android stock browser crashing, it points to jQuery bug where slideUp/ slideDown have problems in Android stock browser (please note that jQuery and Android versions are different in the reported bug).
My questions are:
Is this a known issue?
Has anyone faced similar problem before?
Is there a workaround to resolve it?
I'd really appreciate if anyone could point me in the right direction.
Here's the site that I'm working on:
http://www.montevista.dreamhosters.com/
You'll need Opera Mobile Emulator or an Android device (not all of them show this problem). The Samsung Galaxy III shows it as well I think.
Here's an un-minified version of the stylesheet:
http://www.montevista.dreamhosters.com/wp-content/themes/Monte-Vista/style-unminified.css
I'm pretty sure that this isn't a problem with the responsive-nav.js, but something to do with my own code. I'm using Skeleton grid.
Is there any testing tool that would allow me to view source on this? I've tried connecting Opera dragonfly but it ends up showing me what is being displayed in the browsers instead of what's in the emulator.
Me again, replying to my own question. I fixed it by switching to Slick Nav (http://slicknav.com/) instead of Responsive Nav.
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,
I have developed a web app with jQuery Mobile that works fine in most phones I've tested it on, but recently found out that on SonyEricsson Xperia the pages won't scroll!
Is there anyone here who has come across scrolling problems on any platform with jQuery Mobile apps and knows what causes it and possibly what to do about it?
If I download Opera Mobile browser on the Xperia it works fine, so it only seems to have to do with the default browser (which I don't know what it is, but I assume Google's stock browser...)
I had a similar problem when my JQM web application wouldnt scroll on Xperia.
Firstly I would recommend testing whether you can scroll over content on this page: http://jquerymobile.com/test/docs/lists/lists-performance.html
In my case I could scroll over the content provided via the link above, so I realised it was a local problem. After some research I found out that I had overflow:hidden property attached to my html,body via one of my css files.
Working on a mobile web application, I have found that some Android devices are rendering CSS differently than others. The detail on the site renders perfectly on every desktop browser I have tried on Windows & Mac, on iPhone, on every Android SDK Emulator I have tried, and even BlackBerry. While some Android devices render it perfectly, about half do not - and these "misrender" it in consistent ways. (For example, it looks great in a Galaxy, but is offset when using a G2.)
Aside from purchasing every single Android device on the market, is there any way to test CSS across all the devices available?
Thanks in advance!
In fact: you can use the emulator to replicate CSS differences. I didn't try enough variations.