Develop Reference

Android / iPhone href link not firing - focus rectangle appearing instead

I am having a problem on android and iPhone versions of HTML5 site using responsive layout.
links are not firing unless I hold down on them for 1 second.
Otherwise they act as if a hover event was taking place.
Example code:
<div class="homepageCarDiv">
<div class="note">
<div class="imgDiv">
**<img src="_imgup/19/thumbnail/Imagen_2.jpg" alt="">**
</div>
<h3>MITSUBISHI ASX<br>ASX 200 DI-D CHALLENGE 4WD (2010)</h3>
<h4>16.500€</h4>
<div class="verDet">
<p>**Ver Detalle**</p>
</div>
<div class="cornerImage">
<img src="images/fold.png" alt="">
</div>
</div>
</div>
Code can be seen at http://20coches.com/index.php.
It works correctly on iPad and desktop.
I am at a loss.

This issue was related to responsive divs and focus rectangles being pushed out of the viewport.
Other sources on the internet suggest that javascript calculations of the dynamic element width causes a silent mouse fail on hover, which results in the link not firing.
I just got tired of beating my head against the VDU, and managed to work around the issue - by clearing every div from its neighbour.

Where is this space in my div on mobile browser coming from?

So I have a weird space issue in one of my divs, but only when viewing on Android webkit browser 533.1 (newest versions of webkit android browsers don't have the issue). The issue doesn't appear anywhere else, not on desktop, newer mobile devices or browsers. Etc. Only old android stock browser.
Here is the web page. The div in question is the div with the phone number and address (toward bottom of screen, underneath facebook and twitter icons).
I figure it would be easier for you to go there and use firebug to look at the code, but if needed I can post some code here. There is just a ton of css (multiple media queries).
Here is the code for the div. The spacing occurs before the very first element in the div:
<footer class="hideForDesktop" id="ont_foot">
<div id="footer_div">
<p id="number">909.390.3092 </p>
<p> 1155 S. Wanamaker Ave, Ontario, CA 91761</p>
<div id="bottom-mob-nav">
<!-- navigation module -->
<nav id="ontario_nav2">
<ul>
<li class="here"><a title="Scandia Home" href="/ontario/index.php">Home</a></li>
<li><a title="Scandia Rates & Hours" href="/ontario/rates_hours.php">Rates & Hours</a></li>
<li><a title="Get Directions to Scandia" href="/ontario/directions.php">Directions</a></li>
<li><a title="Rides, Games, & Fun" href="/ontario/attractions.php">Attractions</a></li>
<li><a title="Throw Your Party at Scandia!" href="/ontario/parties.php">Parties</a></li>
<li class="show"><a title="Bring your group party to Scandia" href="/ontario/group_events.php">Group Events</a></li>
<li><a title="Educational tours at Scandia!" href="/ontario/education.php">Education</a></li>
</ul>
</nav>
</div>
<div id="end">
<p class="boring">© 2014 Scandia Family Fun Center</p>
<p class="boring">Prices, terms and conditions subject to change without notice. Some rides may be closed during inclement weather.</p>
<div id="otherLocs">
<ul>
<li class="grey">Ontario</li>
<li>Sacramento</li>
<li>Victorville</li>
</ul>
</div>
<div id="other">Other locations</div>
</div>
</div>
</footer>
I've tried setting the div#footer_div height to both auto and initial with no luck.
Screenshot:

So I found a fix, not sure if it's the best way, but it works. I validated a bunch of problems in the HTML, but that didn't get rid of it. I put borders around all the divs and found the div that was causing the gap. I then deleted all the content from the div and found that it still had height (equal to the size of the gap. So in the CSS I set the div height to 0. This got rid of the gap, then I just had to restyle a couple of things in my CSS to make everything look the way it was and it worked.
If you look at my original post, the div that was causing the problem was footer#ont_foot.

Website doesn't fit full screen on the mobile screen

When I test my development website on any Android mobile phone, the website doesn't fit full screen on the mobile screen. Attached is the snapshot. I' am just trying to make it mobile friendly.
I' am using wordpress with Twitter Boostrap to make my website. On my head tag, I have few meta tags that I found on the Internet for mobile friendly websites. Please note that this is not a responsive website.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">
Please help?

If you were designing a responsive site, but want to "fix" the width of the site in mobile i.e. 800px max width, I found that my only solution was to update the initial scale size. What worked nice for me was something like this, notice the "initial-scale" value:
<meta name="viewport" content="width=device-width, initial-scale=0.4">
Hope this helps someone!

I have had recently the same issue on tablets/phones and fixed that with the following snippet.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#-webkit-viewport { width: device-width; }
#-moz-viewport { width: device-width; }
#-ms-viewport { width: device-width; }
#-o-viewport { width: device-width; }
#viewport { width: device-width; }
</style>
<script>
// Important for windows phone 8
if (navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(document.createTextNode("#-ms-viewport{width:auto!important}"));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>

Make sure you're using the responsive classes included with Bootstrap in order to allow for design within the Bootstrap framework. In Bootstrap, all content is on a 12 "column" grid, and then split up based on that grid.
In Bootstrap 2.x
<div class="container">
<div class="row">
<div class="span6">
Content here
</div>
<div class="span6">
Content here
</div>
</div>
</div>
will produce two divs that span the width of the page.
In Bootstrap 3, they changed their class names slightly to account for different window sizes. The same example, provided you're on a mobile, device would be:
<div class="container">
<div class="row">
<div class="col-xs-6">
Content here
</div>
<div class="col-xs-6">
Content here
</div>
</div>
</div>
You can remove responsiveness in Bootstrap 3 by following these steps:
http://getbootstrap.com/getting-started/#disable-responsive
More information can be found here: http://getbootstrap.com/css/#grid

I know it's an old question but since it shows up in google I thought I'd share the solution I came up with, in case anyone else needs it:
If your website isn't responsive, you don't need the extra meta tags at the header. Try to remove them and it should work as expected.

PhoneGap JQuery mobile data-transition slide giving me fade

I'm trying to do a slide transition but all I see is a fade. Slide works on a Chrome browser but it does not work when loaded onto the phone.
<body onload="onLoad()">
<div data-role="page" id="index">
<div class="fixed-top-bar" data-role="header">Title1</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
<li>List</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
<div data-role="page" id="second">
<div class="fixed-top-bar" data-role="header">Title2</div>
<div class="body-container" data-role="content">
<div class="container">
<ul>
<li>page</li>
<li>World</li>
<li>This</li>
<li>Is A</li>
</ul>
</div>
</div>
<div data-role="footer"></div>
</div>
</body>
There is the body of my html. currently do not have any custom js. Anyone know why I'm not seeing a slide transition?
Edit: I am having this problem on an Android 2.3.6 device. Motorola Atrix 4G to be exact.
Edit: I tried playing around with other transitions other than slide. None of them seem to work. It only gives me a fade.
Edit: I tested my code on iOS and it seems to work just fine. Not sure why it isn't working on Android.

I missed out one very important piece of information on the JQuery Mobile website.
To view all transition types, you must be on a browser that supports 3D transforms. By default, devices that lack 3D support (such as Android 2.x) will fallback to "fade" for all transition types. This behavior is configurable (see below).
That pretty much answers the question...

How to code a scrollable list that works correctly on Android browsers? (HTML)

I have the following HTML, mostly generated on the fly using JS, as a dynamic popup that appears when you click in several points on a map.
<div class="bubble">
<span class="topPaisCont"></span>
<span class="globalContent">
<h1>ASIA</h1>
<div class="contPais">
<a href="#" target="_blank">
<img src="images/flags/asia.png" style="visibility: visible; "> Asia
</a>
<br>
<!-- A few more <a>s with the same structure -->
</div>
</span>
<a class="close"></a>
</div>
I'd post an image but it seems I can't since I'm a new user...
The scrollable list of links is rendered correctly in most PC browsers and also on the iPhone and iPad, where it can be scrolled swiping one or two fingers.
However, I can't make it work on Android, where it can't be scrolled down.
Can you help with this? Is it the way it's implemented?
I can post the CSS if needed.