This website's content is bunched to the left when viewed on android browsers, as demonstrated in the two screenshots below. I feel like I've come across other websites with this issue when using my mobile browser, so I'm thinking it isn't an uncommon issue.
The site isn't responsive (yet) and there are no media queries. I am not using the viewport meta tag, to prevent initial zoom-in on a non-responsive site (as detailed here).
The issue isn't happening on:
iOS Simulator, Safari Browser
Opera Mobile Emulator (emulating opera running android devices like Kindle Fire and HTC phones)
Android Samsung Smartphone, Firefox and Opera browsers
The issue is happening on:
Android SDK, (emulating an android browser on a Nexus S)
A Samsung Galaxy S2 (pictured below), in Chrome, Dolphin, & Default browser
Here are the details for the device in the screenshot:
device_model = samsung SGH-T989
device_res = 480x800
orientation = portrait
os_name = Android
os_version = 4.0.4
pixel_density = 240 dpi
url = http://bryanbraun.com/
Mobile Version
Desktop Version
Try adding a background-color on the tags which contain the text. This way, android will (hopefully) consider these some kind of blocks and (probably) will render them fine.
Related
In react/iPad do we have limitation regarding the history.replace() function ? As during testing history.replace() function is not working only in iPads the same works fine in Android mobiles and tablets.
Is there any limitation or so either in React BrowserRoutes or iPad browsing history.?
Seems like issue wasn't with the history.replace() rather using localStorage in incognito window in safari browser on mobile and tablet devices. Guess this is specific to Safari browser versions too
I'm using materializecss.com and angularjs for my website. The problem is quite interesting:
When i use Chrome and resize my website, everything stays responsive (not perfectly tough). But when i use the Chrome Emulation tool (with Apple iPhone 6) its not responsive anymore.
Have a look at the screenshots:
So you can see the different scale.
You can have a look at it at zencubes.io
Any ideas?
The description of your problem sounds like it's been answered here previously at Stackoverflow here, where it works in the device emulator in Chrome but not on the actual device itself.
Why CSS Media Query doesn't work on mobile device but yes on Google Chrome device emulator?
Have you checked your Viewport meta tag settings, in particular the width attribute?
I embedded a Google Maps Street View in my page using "gmap3" jQuery Plugin:
Under certain browser width and on mobiles, Street View shows a black border in the bottom and the image is deformed.
You can try it here by resizing the browser window down to about 400px:
http://www.genovaperte.it/item/hostaia-del-missionario/
PS: in order to see the webpage you'll need username = webcompany and password = webcompany as the site is not online yet.
Already tested in many browsers and mobile phones with the same issue.
This happens both with the desktop Flash version and the HTML5 mobile version of the Google Street View.
Seems Google corrected the issue.
I have a weird issue where some content included via Edge Side Include is randomly missing. Its a menu wrapped in a header tag. Sometimes it displays in the browser sometimes its missing.
A few notes:
1) This only happens on mobile and tablet devices. I have been able to reproduce the error on an ipad, blackberry torch and an android phone (Samsung galaxy s3) using the default android browser, firefox and chrome for android.
2) I installed the Android SDK for debugging but received no errors. The only thing I found was everytime the header was missing there were also no cookies set which is odd. And then when the header was displayed there were cookies set.
3) The problem can be rectified by clearing all web data in the browser (cookies, cache etc).
The application is written in Symfony2.1
The reverse proxy server is Varnish
Any ideas?
I'm looking for iPhone, iPad, Android and other mobile and smartphones web browsers simulators on x86. I would like to check how my web application written for standard web browser will be displayed on these devices.
The dev kits for these platforms include platform emulators, in which you can run the browser for that platform and load your web site to see how it will look.
http://developer.android.com/guide/developing/tools/emulator.html
http://developer.apple.com/programs/ios/develop.html
I'm programming a web application for mobile and I use JQueryMobile.
You can have more informations here :
http://jquerymobile.com/gbs/
if you just want to quickly view how a webpage would render at various mobile device resolutions then synthphone.com is a nice little webpage...
http://synthphone.com
you can even link directly to a url via query strings. for example, here is one that should load the Sencha Touch 2 carousel. Use your mouse like a finger to slide around the images etc.
http://www.synthphone.com/?u=http://dev.sencha.com/deploy/touch/examples/production/carousel/index.html
have fun!