I'm building a site in ASP.Net which has a responsive layout using the following:
<meta name="viewport" content="width=device-width; initial-scale=1"/>
on the aspx page, and in my styles.css using
#media screen and (min-width: 319px) {
#divname {color:#808080}
}
This is all working great when I test the site locally when I use "Start Debugging". However, when I upload the site to my Windows 2008 R2 server with IIS7 all browsers do not respond to the viewport size, and styles inside the #media screen... are ignored.
Is there something special I need to make this work on my server?
My first suspicion is that it's something unrelated to your server.
Doublecheck that there isn't a caching issue with any old files
Make sure your browser hasn't cached old files
Use devtools and check you don't have any 404s
Check you don't have any CSS errors: http://jigsaw.w3.org/css-validator/
Good luck!
The solution was removing my site from my IE Browser Compatibility View.
Related
I have this CSS in a Razor Page project:
body {
background: url('../images/graphics/myimage.jpeg') no-repeat center center fixed;
padding-bottom: 20px;
}
The main body tag and link to the style sheet are in _Layout.cshtml.
The background image works fine everywhere except for pages other than index.cshtml in the mobile version of MS Edge browser; it works just fine in Chrome mobile. Works fine in all desktop browsers too.
I've only tested on Android.
According to your description, I come to the following conclusions:
Try restarting your Edge mobile and cleaning up its cache.
Check whether the image cache settings of Edge are limited;
Perhaps the Edge mobile belongs to the third-party software on your phone, so its speed is slightly slower. In addition, its compatibility with your phone's operating system affects the page rendering process.You could try different models of mobile phones to test.
For more:this link.
If the background image still cannot be loaded in edge mobile, hopefully you could provide information about the more code or settings that is related to browser loading.
Ive got a problem with website which I was helping to develop.
link is here: http://orfinstudio.pl/www/
why the website is not scalling to the size of mobile?
Ive used
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
tried also other combinations..
I'm fairly new to this place but I've some experience with web design and stuffs.
I advice you to never use templates because they can be very difficult to handle.
If you are using css positioning I greatly advice you use margins to move your containers around. left, top, right, and bottom will retain their property whether it's on mobile or desktop. So
top:1000px(desktop) = top:1000px (mobile), but
margin-top:1000px(desktop) = margin-top:1000px/mobile screen size(mobile).
Use px (NOT percentages)as unit when you are directly in the body tag, mobile phones are smart, they will shrink the web page in a facinating way so you dont have to worry about multiple css for the same website(mobile queries). I advice you only use percentages in child containers, e.g a div in a div.
Make sure you understand how a slider works before you implement it into your website.
Finally the website looks as though its missing some style sheets,make sure you have the right paths/reference to each style or script files.
This is a mobile-desktop website which I created sometimes ago using pixels http://marybethandtonias.com
I had this problem once,i got solution through internet and i fixed it,Change this in your meta tag...
content="user-scalable = yes"
I'm working on a responsive design site and ran into a fairly large snag. I used viewport code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
and used:
#media only screen and (min-width: 501px) and (max-width: 930px) {
CSS HERE}
as needed. When I put my index page on my host server to check it the site wouldn't respond to changes between my mobile devices. I tried my domain name site- didn't work. Turns out the domain name points to my sever and displays the site in a <frameset> and canceling out my CSS and meta. When I go to the native web address of the server it works properly. Is there anyway around this?
SOLVED - I have found a solution using a well know hacking technique to inject the relevant code (without actually hacking anything!).
I have my domain name at 123-reg.co.uk and free webspace at freehostingEU, with framed web forwarding on 123-reg.co.uk to maintain my domain name in the free space. To solve the problem of the frame blocking the viewport meta tag on the site, go into the web forwarding options in somewhere like 123-reg.co.uk where you can usually set your meta title, meta desc, meta author etc, and inject the following code into one of the boxes where you are allowed to enter some meta data for your framed page e.g. meta author and insert:-
your-author-name"><meta name="viewport" content="width=device-width, initial-scale=1.0,
which will then put the viewport code into the frame forwarding page straight after the meta author. And it works, because I have just done it on 123-reg and it works great!
This site finally explained how I could do this to me. Now when you visit mydomain.com it forwards to www.mydomain.com which in turn links to my azure server. The domain remains in the url without frames/masking i.e it shows the url I bought want, not the azure one.
http://blog.smarx.com/posts/custom-domain-names-in-windows-azure
From the link:
Add the CNAME record
Step one is to create a CNAME record mapping the “www” subdomain (as in www.botomatic.com) to my Windows Azure application (botomatic.cloudapp.net)
Forward the root domain
Step two is to use domain forwarding to map the root domain (botomatic.com) to the subdomain we already mapped (www.botomatic.com).
I set up a responsive design site which uses the client's viewport to determine how the site is configured. It turned out my domain name was forwarding with masking and the CSS was 'reading' the frame as the viewport. disaster averted.
Is there any specific html tag or meta tag that tells a web page is designed for mobile devices? I have created a mobile sitemap linking the mobile web pages, but I am afraid of search engines don't identify these webpages as mobile versions.
I Recommend using Media Queries in your CSS and focusing on developing your mobile website first if you're going to use this technique.
Basic Example
#media only screen and (min-width: 480px){
//insert styles SPEFIC to resolutions greater than 480px wide
}
Regarding the comment:
//default CSS
.hidden-for-mobile{ display: none;}
//overrides the hidden style, and displays your element in larger resolution browsers.
#media only screen and (min-width: 480px){
display: inline; //or block or whatever you want
}
there may very well be a different or better way to implement this, but the point is...
If you are trying to control the look/feel of your website, do your best to keep it in the stylesheets
pro tip: You will want to use em / % based widths to ensure your site responds to your users browsers properly
Check out a working example with HTML5 Boiler plate here.
And Media query browser support list here
Additionally, if you are concerned about tracking your user base, Google Analytics can do that for you. You can break down your traffic however you'd like.
No, there is not. You can use JavaScript to detect mobile browsers, and direct users to special mobile versions of your webpages, but there is nothing that says for a specific page this is for a mobile browser.
If you are concerned that you will be presenting duplicate content to Google, block the spidering of your mobile site via a robots.txt file, then ensure that mobile users are always redirected to the correct mobile site.
If you're concerned about styles and things then see How to setup HTML for mobile Devices with an header-image, that takes whole width of browser?
Else, if you don't want search engines linking to m.domain.com instead of domain.com (or whatever) then I'd think about doing some PHP header detection to redirect to the main site.
To ensure they're not crawled at all so will never show in search results, add
<meta name="robots" content="noindex" />
I´m using a different stylesheet for smartphones and smaller screensizes using <link rel="stylesheet" type="text/css" media="only screen and (max-width: 700px)" href="/smartphones.css" />
The thing is that in my browser it works ok (when I make the window smaller, or when I use a site that emulates some smaller devices), but it won´t work when I try to access my site using my phone.
I´ve tried with an HTC Wildfire (240x320 px) and I´ve set my smartphones.css stylesheet to get called if the screen is smaller than 700px.
I´ve deleted the cache, and I´ve even tried with a couple of other phones... it still appears the complete, normal, big sized window version of my site.
Any thoughts on what could be wrong?
The site is liganet.net
Thanks!!
It might be that your smartphone is not telling your website that it's screensize is small. It happens with smartphones sometimes. My HTC Wildfire scrolls the window and keeps it big, instead of telling the website that it should be handed a smaller version.
Maybe you should check for HTTP headers for User-Agent instead of relying on screen size for this.
hey just add this in tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and it will work.