I have a bunch of landing pages that are fixed-width. All of them appear very zoomed-in on mobile browsers.
What I have done:
I removed the meta viewport tag all together. No changes.
I set the width at several various sizes, for example <meta name="viewport" content="width=1024">, but this did nothing, though I was certain it would work.
Several more variations of the viewport tag.
I'm at a loss. Ideally, I'd just make all these landing pages responsive, but I have at least 20 of them and just want them to look decent for now.
EDIT:
Add this to your CSS:
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
Manipilate the zoom untill you get it right.
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 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 have taken over a website for a company and when it was handed to me, there was quite a bit of work to get it where it is now. Some of the stuff in the site, the owners want to keep, some they allow me to change. One thing I am trying to figure out right now is how to get the mobile version to line up with the desktop version. It seems like in portrait mode, the container width is too small; there is space to the right and some images overlap. I have tried the recommendations in other threads that seemed to be asking the same question, but nothing worked so I thought I would post my own question in case I am changing the wrong code.
I added:
<meta name="viewport" content="width=device-width, initial-scale=1">
and looked for pretty much any "width" in the css, but to no avail. What else am I missing?
Here is the site:
http://leisurelandrvcenter.com/
specifically the "Inventory" page:
http://leisurelandrvcenter.com/inventory/
-Disclaimer-
This seems to only happen on certain devices and only in portrait mode. Landscape mode works fine on the devices checked (android only).
Thanks in advance!
if you want to make it responsive you have to get rid of all the fixed width there are on the css, for example:
if you want to make the inventory page responsive you'll have to edit the following css:
#layout-content {
width: 1285px;
}
to this:
#layout-content {
max-width: 1285px;
width: auto;
}
Then in order to resize the images (for example the logo) you'll have to set the following css:
img { max-width:100%; width:auto; }
Instead of using the img tag you should use the css class or ID of the logo or any image you want to make responsive.
The images are too large for small screens. You could add mediaqueries to your css that set the width of images to 100% for smaller screens. (And anyway use css to set img sizes, instead of using img attributes in the html)
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
I am building a responsive website which will be running on smartphones like iPhone having high pixel density screens. I know that in order to maintain legibility, mobile phones' browsers report a resolution half that of actual screen resolution.
I searched about this and found that this behavior can be controlled by using css media query of device pixel ratio (for e.g. #media screen and (-webkit-min-device-pixel-ratio: 2) ) for iPhone.
I tried using this by putting my entire css code within this block, but my iPhone still displayed the page exactly as it was displaying it without using this media query.
How can I force iPhone and other high pixel density mobile phones to display my webpage at its actual resolution? i.e. for iPhone 5, it should display my webpage at 640px*1136px and not 320px*568px as it is now showing. I know that this will make my text appear smaller, but I still wish to format my webpage like that.
I am using the following meta code in my HTML:-
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Thanks.
Putting your CSS rules in the media query doesn't affect how the browser renders it, if you don't change the CSS rules. You could try with something like this:
.element {
width: 100px;
}
#media -webkit-device-min-pixel-ratio: 2 {
.element {
width: 200px;
}
}
Basically you can explicitly double the size when the device pixel ratio is double. Unfortunately with this technique you have to use a different media query with different sizes for all possible pixel ratio that you have to deal with.
Otherwise you can play with the width attribute of the viewport meta tag. If your page has a fixed-width layout, you can set its width as viewport width. For example if you have use a "standard" with of 960px, you can use the following meta tag:
<meta name="viewport" content="width=960px">