I'm building an application and by far the weakest part of my game is Style and Design. But, I'm having one particular problem at the moment. I'm trying to make my dashboard responsive but when I look at the dashboard as an iphone 6 with my chrome inspector the screen zooms out really far and everything breaks... Here is a screen shot of what I mean.
See how the content is really far away... I really don't know how to fix this? Any idea what I could be doing wrong?
Please try to add this to your HTML's <head></head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Reference: w3schools
I have used twitter bootstrap in my project with DotNetNuke. I did my designing and layout using HTML, CSS, bootstrap. The responsive design was working fine when I tested it on different mobile devices and even if when I resize my browser window.
As it was working well, I converted the design to DotNetNuke Skin. Now, the responsive design works fine only when I resize the browser window and not on mobile devices. I understand the flow in which DNN loads stylesheets and I have followed it. I have made my skin.css as a combination of bootstrap.css and followed by the content of bootstrap-responsive.css
I am not able to find the problem as if I use the same skin.css with my html, it works fine but it doesn't work with DNN (on mobile devices).
You're missing the meta that targets mobile devices for proper scale. Insert the following in the header of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I just notice something interesting and want to share it, maybe it will help someone. In the site header section you should include first the bootstrap.css and only after that the bootstrap-responsive.css because obviously the responsive.css depends on the the bootstrap.css
Of course the meta tag should be also present.
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Make sure responsive CSS(responsive.css) is included after basic not before.
I have been trying to figure this issue all day and haven't got it yet:
I want to have these 3 css files:
lowerThan960pxForDesktop.css (for fluid layout)
MobileLandscape.css (iphone 960px android 800px etc.)
MobilePortrait.css (iphone 640px android 480px etc.)
I want that the Lanscape.css will use the desktop.css
I want that the Portrait.css will use both the desktop.cssand the Landscape.css
how should my HTML should look like in order to get that right - using media queries or javascript. I have gone over through this a lot of time and each time something goes wrong (either the desktop gets the mobile.css or either the iphone read the Portrait.css even that it is in landscape mode etc.).
maybe the Iphone problem is related to the known viewport width problem? solved with adding this to the html.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
besides that use media queries to call the css. and in the css file call #import to call the referring css file (e.g landscape would #import desktop etc)
media queries 101:
<link href="css/phone.css" rel="stylesheet" type="text/css"
media="only screen and (max-width: 400px)" >
and more information about the rich world of media queries here.
also adviced to use conditional IE comments to hide the media queries from older IE and let it use just one kind of css
edit: ah I now understand the problem - you need to use different css in different Iphone situations.. you could use jquery mobile and bind a css class change acording to the change from portrait to landscape and back.
hope this helps
I've got a site that isn't mobile enabled, but as part of a campaign, we are going to be sending out a QR code that contains a voucher to link through to a "hidden" page on this site. Of course as users are going to be accessing this page from a mobile phone, this page needs to be mobile enabled.
My question is, how do I go about doing this?
I know that you need a separate mobile style sheet but I've never done this before. Is this the best approach? I only have access to the front end of the site, so is there anything that needs to be done on the back end?
Thanks in advance and apologies if this seems a bit vague.
You need to have this in your <head> in order to make it jump to a mobile layout.
...
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=devide-width, initial-scale=1.0" />
<title> ... </title>
...
<link href="/stylesheets/mobile.css" media="only screen and (max-width: 767px)" rel="stylesheet" type="text/css" />
Then design the site for mobile using the mobile.css stylehsheet and it will be picked up automatically by the media query.
Hope this helps.
My question is, how do I go about doing this?
If you want to use the same page for regular size displays and mobile size displays, then look at media queries so you can do adaptive design (for which mediaqueri.es has some examples.
Whether or not you want to adapt to display size, the only other major factor is testing. Make sure you test on a range of devices and browsers.
You can just fit page to mobile phone screen. For example, page width is maximum 480px, avoid too big pictures, do not use java scripts etc.
you are correct in that you should start with a mobile.css. You should also use a mobile.js, as most heavy javascript will not be needed, and you want to keep the number of requests down and file sizes small.
I would suggest having something on the back-end though, which prevents the regular .css and .js files from loading, possibly based on the user-agent (the best method for this is a whole other topic). Otherwise, you would have to overwrite every style in the original .css file, which is way too much info to feed to a mobile device.
That would be the approach if you wanted to make a mobile version of the whole site.
since you mentioned only one page, you will just need to make a simple .css file and a (simple) page which fills the entire screen of the mobile device, using something like this:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
once again, be sure not to load unnecessary .css and .js files
I am using the following HTML on my site:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/mobile.css" media="handheld"/>
</head>
The purpose of this is to switch between the desktop and mobile version of the site when the appropriate browser is detected. My problem is that my HTC Hero Android browser is not displaying the mobile version of the site, and is instead displaying only the desktop version. My browser is set to display the mobile version of a site where possible. What am I doing wrong here?
PS. The mobile site is only a tech demo for my coursework, and so it only needs to be viewable in my browser to show that there is a mobile version of the site (it's my CSS that's being evaluated).
handheld is used to attach CSS file
for mobile devices, but it isn't used
by Android and iPhone.
source : http://www.rkblog.rk.edu.pl/w/p/optimizing-websites-iphone-and-android/
So you can use something like the following:
<link rel="stylesheet" href="css/style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" />
<link rel="stylesheet" href="css/mobile.css" media="handheld" type="text/css" />
According to this page, Android’s browser doesn’t load stylesheets marked as media="handheld".
The code from my question on iPhone stylesheets should work for Android (although I haven’t tried it): How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?
History: the handheld media type was invented and used before Apple released the iPhone, and its version of Safari. (Android, if I understand correctly, effectively uses the same rendering engine for its browser as Mobile Safari does.) The whole idea of Mobile Safari was that it rendered the internet like you’d see it on a desktop. If it had used handheld stylesheets, it would have been stuck with a very simplified look for websites that included them, as handheld stylesheets were targeted at old, really simple phone web browsers.
I'm no expert in the topic, but my guess is that your phone uses a modern browser that acts like a desktop one, and chooses the wrong stylesheet.
A server-side script could easily determine the proper file depending on the User-Agent, but it may not be feasible in your scenario. It'd definitely save you hours of headache.
The easiest way I have found is to use simple device detection, I found a good article and code at http://mobiforge.com/developing/story/lightweight-device-detection-php.
The code they give is as follows
<?php
$mobile_browser = '0';
if(preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
$mobile_browser++;
}
if((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
$mobile_browser++;
}
$mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
$mobile_agents = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda','xda-');
if(in_array($mobile_ua,$mobile_agents)) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini')>0) {
$mobile_browser++;
}
if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'windows')>0) {
$mobile_browser=0;
}
if($mobile_browser>0) {
// do something
}
else {
// do something else
}
?>
Then just include your css in the if statement at the bottom.
I played around with this as well and it didn't work. After searching on Google it appears media="handheld" is not supported everywhere or by every mobile.
But here you have a premium class that will help you out if you use PHP: http://codecanyon.net/item/php-mobile-phone-detection/98397
Just use this meta tag in your head section among the first tags.
meta name="viewport" content="width=device-width, initial-scale=1"