I'm running into some trouble with two things on mobile.
1. The project has no border on a desktop computer. When you view it on an ipad or iphone it puts a border around it. I found out this is due to scaling as it goes away when I add viewport, but I don't want viewport turned on. Does anybody know how to get rid of the border?
2. I have a navigation bar with a png image sitting inside the div. When you click the div it shows a video which works perfect on a desktop computer. When it's on an ipad or iphone you have to tap it twice. The first tap shows the mouseover effect (background color change) then you have to tap it again to show the video. How do I set it to show the video on the first tap? I tried touchstart but had no luck.
Regarding the first one, it's the only way I know of to get rid of that outline. The second question, have you tried getting rid of your mouseover and click event and just relying on the touch event? The only reason I ask is that sometimes the various events will interfere with one another, especially since the mobile browsers will try to mimic the desktop events as much as possible, but the reaction time can be poorer. For instance, I've found that iOS, touch events fire much quicker than a click event. Having both touch events and click events is kind of just a race condition waiting to happen.