have been looking around for a solution to my query but haven't had any luck.
I have a website that I have designed with css responsive design.
I wanted to know if there is a way to use viewport to make a device such as an ipad
view the website look like that of a larger width device.
Essentially I want to make these responsive elements now sit like they do on a desktop computer but on an ipad and other mobile devices.
Have tried things such as
<meta name="viewport" content="width=device-width, initial-scale=1> but no luck so far.
<meta name="viewport" content="width="1100"> seems to make all the content appear the way I want but aligns the site to the left not centred.
I've used #media queries for my css and now I want mobile devices to essentially ignore these responsive design elements and look like it does in a desktop browser.
Any help appreiated
Hope this helps, put this in your css.
<style>
#media ( max-width:110px) {
.yourmenu{
//do your css coding here, you may tweak the size
}
}
</style>
more here: http://www.w3schools.com/css/css_mediatypes.asp
Related
Im creating a responsive site and i didn't understand why my document width is 980px, even tho im in braves inspector tool with a responsive size of 428x807. If i set a media query like this:
#media only screen and (max-width: 576px) {
h4 {
color:blue;
}
}
Should this not say that if the screen is less than 576px its supposed to be colored blue? How come the inspector and the actual size of document is different?
There is a special mate tag to force browsers, in particular mobile ones, to be real about their viewport widths. This tag is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and should be included in the head of your document. Historically mobile devices would pretend to have desktop sizes since websites weren't expected at all to be rendered at such small screen sizes when mobile devices were first popularised. We are talking about the blackberry era here and it was deemed more appropriate to render a website extremely zoomed out on mobile so that you could zoom in as needed and at least see all the content as intended. I hope this is your problem because otherwise I can't think of another explanation.
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
#media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
=============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
#Andy is right, double check your device-widths, or you could always just use min-width so you don't have to know every device width.
Regardless make sure you have a viewport tag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
Fantastic - forgot the viewport too!
Fot all:
Just add
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Thus this worked for me:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
I want to make my page act just like facebook! if you try to display facebook in a mobile phone width it will stay the same as in the computer width! see the picture link :
https://imgur.com/a/uLqtrLS
but I want the responsive to be active for big widths ! I mean that if I display on a 1600px width computer it will fit in it the same thing for TV.
but not for mobile devices.
I have already used media queries but I want the width of mobile devices look the same as the computer width
I believe you're looking for the CSS media query:
#media screen and (min-width: 480px) {
/*CSS if screen size >= 480px*/
}
You also should use the <meta name="viewport" content="width=device-width, initial-scale=1"> tag in the <head> of a page to tell mobile browsers not to change the page to fit the screen.
Websites like facebook is using headers to define the user device. If you see it in desktop and resize it. It does not change the view so much. But if you refresh the page it redirects you to another page https://m.facebook.com so. All you have to do is to design multiple views with fixed width.
I am currently creating a desktop site (http://www.robtest.org.uk) that I want to work well with mobile browsers to alleviate the need to create a separate mobile site. Mobile safari appears to scale up the fonts of large blocks of text (which is fine). The problem is with tables which I use for content rather than layout. The fonts in the wide columns are scaled-up to make it readable while those in the smaller width columns are ignored.
My current workaround to render tables consistently is:
#media only screen and (max-device-width: 480px) {
#container td { -webkit-text-size-adjust:100% }}
It does work well for pages such as:
http://www.robtest.org.uk/audio_catalogue.html
But it's not ideal for tables like those containing our event details such as:
http://www.robtest.org.uk/events.html
In the latter I'd much rather have all the fonts scaled-up so that the page is consistent rather than just the right hand column.
Is there any way to do this?
Help would be very much appreciated.
Thanks, Dougie :)
Add a viewport tag in the <head> section of your page, it will help prevent device scaling/zooming and give you a uniform look across mobile devices
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.