I've developed a website using MVC4 in visual studio. The standard template includes code for displaying correctly in mobile browsers.
When I run the project, it applies all of the mobile css. Also, when I deployed the website to my own (amateur) IIS server, it applies the mobile css perfect.
Then I bought a DNS address, and forwarded it to my server. Now when I visit the DNS address, it shows the desktop version instead of the mobile version.
What is breaking it down? How can I fix this?
Thanks for your time to answer my question.
EDIT
Thanks for your input. I only have one CSS file with a media section. On some browsers it displays correctly and on others it doesnt. But the problem only exists when visiting the DNS, not when visiting the direct ip-address.
Use the tag. Put all stylings for any browser that doesn't support javascript intp the tag. That way since most moblie browser do not support javescript You can put all stylings of mobile view into that tag and all would work well...... GOODLUCK!!! #da_skywalker10
If:
You have access to the HTML page and can edit it.
You have 2 different CSS files (one for mobile layout and one for
desktop layout).
I would suggest checking if the head tag of the HTML contains:
<link rel="stylesheet" type="text/css" href="locationOfCssFile.css" media="all">
Note: The above line will display the webpage according to one CSS file whether it's viewed on a mobile device or a desktop screen.
If it does, then change media="all" so you would have 2 link tags, one for desktop and one for mobile.
It would look something like this:
<link rel="stylesheet" type="text/css" href="locationOfDesktopCssFile.css" media="screen">
<link rel="stylesheet" type="text/css" href="locationOfMobileCssFile.css" media="handheld">
Source:
HTML link media Attribute - w3schools
Related
I have CSS files that are being loaded correctly in FireFox (52.0.1). They are listed in the Style Editor tab, but not in the Network Monitor tab. It doesn't matter if I click All or CSS in the Network Monitor tab, no CSS files show up.
I am including the css files in the <head> like so:
<link rel="stylesheet" type="text/css" href="https://{path}/css/print.css" media="print">
<link rel="stylesheet" type="text/css" href="https://{path}/plugins/components/jquery-ui/themes/base/all.css" media="all">
I'm assuming they're supposed to show up in the Network Monitor tab considering there is a CSS option, so what gives?
As your screenshot says that there were only 15 requests but you obviously have 8 files in the Network Monitor and an even larger number of CSS files, this looks like a bug in the Firefox DevTools.
I suggest you first try out a new Firefox profile. If it works there, its obviously a bug in your profile. You may track it further down to a specific preference or add-on causing the CSS files not to be listed within the Network Monitor, but in any case you should file a bug.
I'm trying to find out if it will be a better use of my time (now and in the long-run) to make a separate style sheet for my mobile site (which will look drastically different, but use the same database information and elements), or , make a whole new mobile page and steal what I need from my desktop site.
Does anyone have an advise or know what most developers practice when it comes to mobile sites?
you can use media queries.
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="handheld" href="mobile.css" type="text/css" />
Or in css3
http://www.w3.org/TR/css3-mediaqueries/
A lot of sites these days are concentrating on mobile first, then porting to a full web app for desktops. More and more peyote are using their mobiles to browse the web and a site designed for mobile will generally support desktops better than a desktop site will support mobile browsers.
I read about device.is at HTML5 rocks here: http://www.html5rocks.com/en/mobile/cross-device/
There's a lot of controversy in that. I personally prefer media queries. and it they aren't TOO complex, I put them right in my css file using #media FOO and ( max-size: ### ) { /*stuff*/ }
A "mobile website" usually like m.domain.com, is usually a very stripped down version. containing some products, info, and a way to contact.
Why would you hide the rest of your valuable site info just because someone is on a smaller device? the load time can be a bit longer since there is more content, just make sure you super important stuff is above the fold. (or at least higher up in the draw order)
You can also very easily include click to call and click for map buttons that appear at a certain size using media queries.
I created a stylesheet for jquery mobile using the ThemeRoller tool. It looks really great on the ThemeRoller page. In my mobile app... not so good. I think there must be some conflicts in definitions between my stylesheet and the jquery stylesheets.
Rails layout file:
<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>
For those of you not familiar with rails it is rendered:
<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />
Is the only way to deal with this to wade through thousands of lines of css to look for conflicts? Is there a css debugging tool that will detect that in a stylesheet? I could change the jquery file names to scss and then roll them into one stylesheet. I am familiar with Firebug and Web inspector which check styles on one page. That wouldn't help... right?
Thanks.
Unfortunately for you, All of css is based on inheritance so there is no automated way of knowing of a conflict or if an object has just overriden the styling of a parent. I think the best bet is to force rails to show the mobile version of the site on a desktop pc and then you can use the Google chrome inspector. It will show you all styles applied to a specific object. It only shows relevant styles with line numbers in the stylesheet so you aren't stuck wading through css. You can also edit it in chrome to see what your changes will look like before you change your stylesheet.
Firebug (an extension for Firefox) can show all styles applied to any given element, as well as which styles are overridden by other styles. You would have to view your mobile site from a desktop browser, but this can be done in Firefox by changing the useragent to match that of a mobile device (iPod, Android, etc.)
If you plan on using webkit on your site, Firefox is not a great choice as it does not render webkit css styles. An alternative is to use Safari and its development tools (which can be activated in the options menu).
If you need to debug from an actual mobile device, there aren't many options. If you can get Opera mobile onto the device, it comes with a decent debugger called Dragonfly.
The order of your stylin Stylesheets matters for what gets overridden. Make sure your style sheet is before both of the jQuery style sheets.
I have an ASP.NET MVC website running in the windows azure cloud. It includes links in the section like this one:
<link href="Content/Case02.css" rel="stylesheet" type="text/css" />
Sometimes the css is delivered within the page (inline) and sometimes it is not. I want to set something so that it is always delivered to the browser as a seperate GET.
The website is www.caselines.co.uk
Any thoughts anyone?
Not sure I am understanding your question here. If you want the CSS to be displayed "inline", like I assume you're saying, then you can just use a <style> code block.
<style type="text/css">
...
</style>
The way that you are linking the stylesheet in your question is an external stylesheet, so I don't quite understand what you mean by "sometimes the CSS is delivered inline".
Here's the situation.
I made three style sheets for each of the three pages I am currently working on. One that works in IE8/Safari/Opera/Firefox. One that works in IE7 and one which if used alone works on IE6
I tested everything on www.xenocode.com/browsers and that sites' IE 6 and 7 emulators.
3 I used a variation of the article's suggestions for a way to make all the sheets work. (In the section:
http://www.thesitewizard.com/css/excludecss.shtml
The problem is that while it calls up the proper css for IE 8 and IE 7 online (It works just fine directly off my computer), it can't seem to call up the code for IE6 properly online causing the layout to be messed up in IE 6 (Or at least the emulator on xenocode.com.
Is there a better method?
(Can't show you the full page, due to my client being adamant about not showing it until the project is finished.)
Assuming you are using browser conditional statements...
I would check that the emulator your using is able to interpret browser conditional statements. If unsure you could always disable all other stylesheets and link normally (using the link tag) to just the IE6 stylesheet and then test
You want to have IE6 specific CSS? Also, please consider using Microsoft SuperPreview to locally see how your design looks in various versions of IE6.
You can use these css selection tags for the specific Browser version for IE.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/ie60.css" /><![endif]-->
<!--[if IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie55.css" /><![endif]-->
<!--[if lt IE 5.5000]><link rel="stylesheet" type="text/css" href="/css/ie50.css" /><![endif]-->
http://rafael.adm.br/css_browser_selector/
I love this thing because it lets me define granularly all the changes I want for different browsers / operating systems.