mobile-website

I'm looking to build a new website and want to take a responsible "mobile-first" approach. One tenet of this methodology is to only load what you need, and to avoid including large wasteful libraries and frameworks until you actually need them. For this I intend to use modernizr2 to test for features and then load only required files and libraries. On the javascript side, I'm really interested in using something like zepto.js ( http://zeptojs.com/ ) which is a tiny javascript library (2-5k) optimized for mobile webkit (and mobile webkit alone) while maintaining a jquery compatible syntax. It's

I want to change the color of the iOS 7 status bar in Safari and Chrome. I'm working on a mobile web app and would like it to feel native and right now, I just get a white status bar. I'm using this while ios has the bug mentioned in other answers. First I set the statusbar with this: <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> For me, that sets the text white and background transparent. It also floats over my content. Then I have following css: body{ background:#dddddd; } body:before{ display: block; content: " "; height:20px; top: 0; background:rgba(0,0,0

For desktop browser all modern browser uses Zoom functionality so we can use PX but if same site can be seen on mobile then would px not be good for zooming in mobile browsers. or use of px is also fine for mobile browsers. even if we don't care for IE 6 , should we use em in place of px still if we are not making different site for mobile, same site will be seen on both desktop and mobile phones (iphone, blackberry, windows mobile, opera mini, android etc? px won't be a real actual pixel when the screen is zoomed out on a modern mobile browser. These browsers are effectively emulating a

My research has led me to learn that Apple's media element handler is a singleton, meaning I can't have a video playing while an audio is playing in the background. I'm tasked to build a slideshow presentation framework and the client wants a background audio track, timed audio voice-overs which match bullet points, and variable media which can either be an image or video - or a timed cycle of multiple media elements. Of course, none of the media works on iOS. Each media element cancels out the previous. My initial thought is to embed the voice-over audio into the video when there's a video

I'm having an issue where horizontal scrolls appear on certain phones for my site. I tried to put overflow-x :hidden but it's not working. The width is auto, so that it will actually automatically resize the web to suits the screen size. All other phones are fine except when viewed in blackberry, nokia e52 and Windows mobile, the horizontal scroll will appear. Any advice? Thank you! jrosell In order to set width to device width, use the following: <meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" /> pollux1er Simply add this CSS: html,

I have three different versions of a mobilized website, and as the market is flooded with more and more phones, I'm struggling to keep up with knowing where to push them. I'm wondering if anyone has faced a similar issue, of how to detect the browser type, and forward to the appropriate version of the mobilized website (where it be text, simple html, advanced html and javascript). I would be very interested in hearing the other solutions that other's have tried. Basically the text version is for phones that don't support CSS or Javascript the Simple version is for phones that don't support

Today I've learnt something new, that <select> element rendered completely different on a desktop and mobile browser. The problem that I haven't use it before and almost all stuff I've done, is by using Bootstrap's elements. So my question is actually 2 questions are following: Why <select> tag rendered differently on mobile chrome and desktop chrome when I debugging in mobile mode? Is it intended behaviour or I can consider it as bug? For example open following page http://www.w3schools.com/tags/tag_select.asp from desktop browser in dev mobile mode and on a hardware device, you will see the