mobile-browser | 易学教程

What browsers download hidden images

阅读更多关于 What browsers download hidden images

问题 <style type="text/css"> .hidden-image-container { display: none; } </style> <div class="hidden-image-container"> <img src="lulcats.png" /> </div> I'm mainly interested in what mobile browsers make the optimization of not downloading an image that's in a hidden container. This would allow me to signficantly reduce initial download time. Related reference question about loading images across devices 回答1: Someone has tested this before: http://www.w3.org/2009/03/image-display-none/test.php Edit:

Detecting mobile browsers on the web?

阅读更多关于 Detecting mobile browsers on the web?

I'm curious to know how to check for iPhone, iPad and other mobile browsers.(JavaScript or CSS) Edit: Not user agent string, please. That can be faked. Possible Dupes: Auto detect mobile browser (via user-agent?) and Standard way to detect mobile browsers in a web application based on the http request Basically you check the User Agent String see http://www.hand-interactive.com/resources/detect-mobile-javascript.htm Detect iPhone: navigator.userAgent.toLowerCase().search("iphone") > -1 In general feature detection is better than browser detection it is better to know what the user's browser

How to prevent mobile keyboard from rising footer over the text fields?

阅读更多关于 How to prevent mobile keyboard from rising footer over the text fields?

问题 I am having trouble with my footer. I want the footer to stay at the bottom of the screen, but there is a slight problem. When using mobile browser, some fields get blocked by the footer when opening the keyboard. The footer rises over the keyboard and blocks the field you are typing in. How can I keep my footer at the bottom and prevent it from rising over the keyboard? I want it to stay hidden under the keyboard. I am using bootstrap, but I have set the following stuff in my own CSS: footer

jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

阅读更多关于 jQuery scrollTop() does not work in scrolling DIV on mobile browsers, alternatives?

I am trying to scroll to a specific location in a scrolling DIV. Right now I am using a pixel offset with the jQuery scrollTop() function which works great on desktop browsers but it does not work on android mobiles browsers with the exception of Google's Chrome Android browser (do not have an iOS device to test if that works). All the solutions I have found are for page (window) scrolling and not for scrolling in a DIV, anyone have any suggestions on what else I can use to accomplish the same task? Here is a example : http://jsfiddle.net/aQpPc/ http://jsfiddle.net/aQpPc/embedded/result/ Other

Detecting mobile browsers on the web?

阅读更多关于 Detecting mobile browsers on the web?

问题 I'm curious to know how to check for iPhone, iPad and other mobile browsers.(JavaScript or CSS) Edit: Not user agent string, please. That can be faked. Possible Dupes: Auto detect mobile browser (via user-agent?) and Standard way to detect mobile browsers in a web application based on the http request 回答1: Basically you check the User Agent String see http://www.hand-interactive.com/resources/detect-mobile-javascript.htm Detect iPhone: navigator.userAgent.toLowerCase().search("iphone") > -1

How to hide a mobile browser's address bar?

阅读更多关于 How to hide a mobile browser's address bar?

Safari and Chrome on mobile devices both include a visible address bar when a page loads. As the body of the page scrolls, these browsers will scroll the address bar off screen to give more real estate to the website as shown in this image: I'm running into a bit of an issue with my site allowing this. I'm working on a Pokedex that contains a very long list of all the Pokemon. However, with the way I've set up the page it doesn't want to scroll the address bar out of sight. My html looks like: <body> <app>  <nav>...</nav> <!-- The

Make scrollbar visible in mobile browsers

阅读更多关于 Make scrollbar visible in mobile browsers

when I have a web page with a scrollable content. With css property "overflow:auto" or "overflow:visible" the scrollbar is visible on desktop browsers, but when I open the page on mobile browsers the scrollbar appears only when I try to scroll. Is there a way to make the scrollbar always visible on mobile devices? I have tried some JQuery libraries but none of them have worked. The html code is trivial, I have a scrollable div with an IFrame inside: <div id="wrapper"> <iframe id="frameContent" src="mysite" scrollable="yes"></iframe> </div> The css: #wrapper{ overflow: scroll; -webkit-overflow

How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed

阅读更多关于 How to launch apps (facebook/twitter/etc) from mobile browser but fall back to hyperlink if the app isn't installed

I am hoping there might be some way of detecting whether or not an uri:scheme is registered on a mobile device from within the browser. IE: I'd like to check if the facebook, twitter, pinterest apps are installed and can be launched from their associated uri:scheme. if(fb_isInstalled) { // href="fb://profile/...." } else { // href="http://m.facebook.com/..." } Basically if the user has installed facebook, then launch the app, but fall back to the mobile version of the fb website if the app is not installed. I think I've got a working solution. <!-- links will work as expected where javascript

forcing web-site to show in landscape mode only

阅读更多关于 forcing web-site to show in landscape mode only

I want to show my web-site in landscape mode only, is it possibile? It does not matter what the orientation is of device in user's hand but the web site will always be in landscape mode. I have seen iPhone application working like that but can this be done for a web-site? @Golmaal really answered this, I'm just being a bit more verbose. <style type="text/css"> #warning-message { display: none; } @media only screen and (orientation:portrait){ #wrapper { display:none; } #warning-message { display:block; } } @media only screen and (orientation:landscape){ #warning-message { display:none; } } <

How to hide a mobile browser's address bar?

阅读更多关于 How to hide a mobile browser's address bar?

问题 Safari and Chrome on mobile devices both include a visible address bar when a page loads. As the body of the page scrolls, these browsers will scroll the address bar off screen to give more real estate to the website as shown in this image: I'm running into a bit of an issue with my site allowing this. I'm working on a Pokedex that contains a very long list of all the Pokemon. However, with the way I've set up the page it doesn't want to scroll the address bar out of sight. My html looks like