I wish to have a DIV element show up on my website only if the user is on a mobile device. This is for a small business website and I want to have a link that allows the end user to call the business direct from the web page - I don't need this DIV element to appear on the desktop version of the website.
I have achieved this using the following code:
#callus {display:none}
#media screen and (max-width: 900px) {
#callus { display:inline !important; }
}
.callnow {
position: fixed;
bottom: 0px;
left: 0px;
height: 100px;
width: 960px;
background-color: #f90;
}
However, upon testing, I have realised that modern mobile devices often have high resolutions that are in some cases equal to what might be considered a "normal" desktop resolution, therefore I am looking for a solution that simply looks for something like "If OS is Windows Phone, iOS or Android then show this element".
Is this possible?
You can detect for different features using modernizr http://modernizr.com/ for example detecting touch is useful, but it requires Javascript support.
Mobile devices despite having high resolution screens should still work with media queries. Make sure to have the below code in your header
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
this sets mobile devices to render the site correctly despite HiDPI
It's not possible with pure CSS Media Queries however you can add queries to address specific device - look here.
You can detect mobile browser (User Agent) with JavaScript and add some class to body - e.g. mobile-device and then in CSS .mobile-device #callus { display: inline; }. I found great solution here: https://stackoverflow.com/a/11381730/3589528
Related
As you can see, the site is shrinked to the side in some mobile devices:
I'm not sure why. There's not width set in the body or the html tag:
body {
color: #444;
font-family: 'Helvetica Neue LT Std', sans-serif;
font-size: 16px;
}
html {
margin-top: 32px !important;
}
This is the viewport tag:
<meta name="viewport" content="width=device-width">
I don't see any thing strange there either. What could be the problem?
Live site: http://www.m2comm-semi.com/electronic-shelf-labels/
It could be a problem with your initial level of zoom. I recommend changing your meta line to -
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
This will force the browser to set your initial level of zoom to normal, i.e. 1x.
Please see What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag? for more information.
Unfortunately, depending on how else you have coded your file, this may not be much help. Alot of people have difficulty getting their page to display properly on an actual mobile device (as opposed to an emulated one). I am one of them. If I ever figure out a way around this problem, then I will post here accordingly (if no one else has already done so).
I am mid-way through re-coding my current site and I have come across a mobile compatibility problem.
If you view the current website via mobile device (here) you can see the width and height of the website is normal sized as it would be when viewing on a desktop with the ability to scroll vertically and horizontally.
However, on my new site (using bootstrap slate from bootswatch - bootswatch.com/slate/) when you preview it on a mobile device it tries to squeeze it all into the fixed mobile device width (here)
I have tried adding the lines below, however I don't see a difference.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
html,
body {
height: 100%;
width: 100%;
}
Is there any way to make the new site to be shown in the same dimension as the current one in mobile devices?
Thanks.
What you see is the responsive behavior of bootstrap I guess. And imho it definitely makes sense to fit the content into the device width on mobile devices.
You can read about disabling the responsive feature in your bootstrap project here: Disabling bootstrap responsiveness
UPDATE:
To make your content horizontally scrollable add:
html, body {
overflow: auto;
}
to your stylesheet.
If this doesn't work try adding !importantto the declaration:
html, body {
overflow: auto !important;
}
NOTE:
This is not the most efficient way css-performance wise, but given your comprehension level of CSS, I guess it would be too much for your to alter the bootstrap.css yourself.
For Bootstrap it self the steps on disabling responsiveness are below. You can download template/CSS with this disabled. Check out http://getbootstrap.com/getting-started/
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
Basically what I'm trying to do is get my viewport width the same on all mobile browsers and make sure the user cannot zoom in or out (scale).
The mobile browsers that don't seem to support this correctly are:
Windows phone 8 IE10
Android native browser
Android Firefox browser
The following line of code works on all mobile browsers except the one from the company that rejects standards as usual (IE, in this case IE10 Mobile):
<meta name="viewport" content="width=620, user-scalable=no" />
I found this question with accepted answer:
Viewport for IE10 & 11 desktop, but not mobile
After applying the below css and javascript code, it still keeps the viewport as device-width instead of the 620 I'm trying to achieve.
CSS:
#-webkit-viewport { width: 620; }
#-moz-viewport { width: 620; }
#-ms-viewport { width: 620; }
#-o-viewport { width: 620; }
#viewport { width: 620; }
Javascript:
$(function(){
if (navigator.userAgent.match(/IEMobile\/10\.0/) || navigator.userAgent.match(/IEMobile\/11\.0/)) {
var msViewportStyle = document.createElement("style")
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
)
document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}
alert($(window).width());
});
As soon as I found out that other browsers had this problem as well, I was able to find better results on the internet.
I have found a solution on at least a part of the question. The viewport sizing seems to work now and we get the correct scale. It still seems I have to accept the fact that with this solution, the user will be able to scale the page manually.
This answer was stripped from a different question:
Trying rendering the viewport meta tag like so:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Setting scale settings will set user restrictions on how far they can zoom, and so if you set the initial and maximum to the same amount, this should fix the problem.
UPDATE: I was able to fix my bug for android devices all together by setting the below:
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
I also noticed that some content, such as p tags were not flowing across the screen, so the hack for that would be to add the background-image property with empty string to any content that is stuck and is not going across the layout view. Hope this helps this time for you.
The Android browser, since 2.2, supports fixed positioning, at least under certain circumstances such as when scaling is turned off. I have a simple HTML file with no JS, but the fixed positioning on three Samsung phones I've tried is simply wrong. Instead of true fixed positioning, the header scrolls out of view then pops back into place after the scrolling is done.
This doesn't happen on the Android SDK emulator for any configuration I've tested (2.2, 2.3, 2.3 x86, 4.0.4). It also doesn't happen when using the WebView in an app on the Samsung phones: in those cases the positioning works as expected.
Is there a way to make the Samsung Android "stock" browser use real fixed positioning?
I've tested:
1. Samsung Galaxy 551, Android 2.2
2. Samsung Galaxy S, Android 2.3
3. Samsung Galaxy S II, Android 2.3
Sample code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height">
<style>
h1 { position: fixed; top: 0; left: 0; height: 32px; background-color: #CDCDCD; color: black; font-size: 32px; line-height: 32px; padding: 2px; width: 100%; margin: 0;}
p { margin-top: 36px; }
</style>
</head>
<body>
<h1>Header</h1>
<p>Long text goes here</p>
</body>
</html>
The expected behaviour is that the grey header fills the top of the screen and stays put no matter how much you scroll. On Samsung Android browsers it seems to scroll out of view then pop back into place once the scrolling is done, as if the fixed-positioning is being simulated using Javascript, which it isn't.
Edit
Judging by the comments and "answers" it seems that maybe I wasn't clear on what I need. I am looking for a meta tag or css rule/hack or javascript toggle which turns off Samsung's broken fixed-positioning and turns on the Android browser's working fixed-positioning. I am not looking for a Javascript solution that adds broken fixed-positioning to a browser that has no support whatsoever; the Samsung fixed-positioning does that already, it just looks stupid.
Maybe you could consider a different approach that doesn't require fixed positioning...
Add scrolling to the paragraph element instead of on the (default) body element. You can then position the paragraph element just under the header. This will ensure that the header always displays at the top of the page yet allowing you to scroll through the text in the paragraph.
h1 {
height: 20px;
}
p {
position: absolute;
top: 20px;
left: 0px;
right: 0px;
bottom: 0px;
overflow-y: auto;
}
I think the best way for android 2.2 browser implement javascript.
You can find more info via this link. It is about fixed positioning in all mobile browsers.
http://bradfrostweb.com/blog/mobile/fixed-position/
In his comment to Brad Frost's article Matthew Holloway suggests a solution along the lines of Anita Foley's answer, but with a polyfill for overflow:auto, where not supported. Check it out here:
http://bradfrostweb.com/blog/mobile/fixed-position/
It's not Samsung's Android broken browser, it's Android 2.2 which has the broken support.
In general as you might know position:fixed was and in some cases still is pretty broken in many mobile devices/systems.
To answer to your question, there is no "toggle or meta tag" that will "turn on the Android browser's working fixed-positioning". If a browser doesn't have support of something, then there's no "toggle" to "switch" it. It's not a feature.
Otherwise, you can use http://cubiq.org/iscroll-4 which emulates it.
(edit: some facts)
According to http://caniuse.com/#search=position:fixed Android 2.2 and Android 2.3 have PARTIAL and not full support of position:fixed. (partial support seems buggy support)
An Android simulator is not and will never be identical to an Android native browser, as much as IETester for example is not the same as IE native (there are differences)
Motorola ATRIX 4G does NOT have Android 2.2 but Android 2.3 ( http://www.motorola.com/us/consumers/MOTOROLA-ATRIX%E2%84%A2-4G/72112,en_US,pd.html?selectedTab=tab-2&cgid=mobile-phones#tab )
You are suggesting that SAMSUNG introduces a proprietary hack or mod that breaks the otherwise working support of position fixed in the Android browser. This seems highly unlikely, regardless of the 3 above points.
The answer is actually simple: There is partial (buggy) support and your only solution is to use a javascript library that replaces or "fixes" the hole.
So I've only experienced this issue on the Android browser so far. Basically my site works fine almost all the time (and I've not seen the problem yet on Dolphin, Opera or Skyfire) but occasionally when I reopen the Android browser from a bookmark on one of my phone's homescreens my site appears stretched horizontally, so now I only see the first 2/3 of the left hand side. Its' as though the browser just lost the CSS or the meta information while it was minimized. Here are my meta tags, and I'm using width 100% in my table styles.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="Task, Tasks, Goal, Goals, Habit, Habits, Track, Tracking, Best Habit Tracker"/>
<meta name="description" content="Top Habit Tracker!"/>
<meta name="mobileoptimized" content="0"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This issue only seems to happen when the bookmark is clicked after about 30 min. to reopen the stock Android browser. Then, it seems browser gets the page from its cache, but still runs window onload for ajax, so I'm thinking the combination of it using a browser-cached page with (maybe?) the javascript DOM manipulations from ajax on top is something that the Android stock browser uniquely has problems with, breaking my table width outside the viewport. Or maybe the DOM changes have nothing to do with it.
If the phone is switched off, then on, and the bookmarked clicked, the stock browser reloads the page from the server, then I don't get the problem. If the browser is minimized, and the bookmark re-clicked after just 2 minutes, no problem either because the browser just re-displays itself and the last page exactly as it was left, without doing anything.
I've been thinking of some kind of hack I could throw on top to force a reload from server in the case where the page is grabbed from brower cache, or I guesss I could try turning off browser caching, but I'm wondering about the implications of doing that on images, css, load time etc. Weighing up my options... thoughts welcome.
UPDATE: Well turning off browser caching may have reduced the incidence of this issue (not sure?) but definitely didn't cure it. I'm now thinking I may be having the same issue as described in this blog post:
http://www.gabrielweinberg.com/blog/2011/03/working-around-androids-screenwidth-bug.html
UPDATE: OK nothing I've tried so far has prevented this intermittent issue in my Android stock browser. I'm going to switch my regular use of my app to Dolphin for a while to see if the issue occurs in that browser. What I've tried so far is: using meta tags to disable browser caching (I think to some extent the Android browser ignores that anyway)... changing the table width (I may try that again in a different way)... Using the solution posted at comment 14 here (dynamically creating CSS link): https://code.google.com/p/android/issues/detail?id=11961#c14 and lastly I've tried appending Datetime ticks to the URL in an effort to alleviate caching, that hasn't worked either.
More useful info here: http://f055.tumblr.com/post/6364300769/viewport-bugs-in-android-browser
Not sure if this will help u - but this is what I did for my mobile apps
This is the only meta I use...
<meta content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<div class=general>
All Ur Content in here etc - or next div etc...
Below the margin-left: 1% and margin-right: 1% formats your div to your width
So if ur browser is upright or wide - it is always 1% border width and fits screen.
Don't use any table width=800 or anything - control it with the 1% margins
</div>
.general {
font-family: Verdana; font-size: 10pt; font-weight: normal;
position: relative;
background-color: #fafafa;
padding: 8px;
margin-top: 4px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
border-radius:5px;
}