I have a website that has a container in the middle of 800px, it has auto margins on both sides so it stays in the center.
Now what I want to do is to have the page be displayed withouth the left and right margined sides on mobiles, so basically I want to have it stretch out the 800px to the device width on mobile and tablet devices.
I tried using viewport meta tags but they don't seem to do much:
<meta name="viewport" content="width=800, initial-scale=1">
I think this just keeps the width to 800 when the devices has lesser pixels, but it will just keep my margins when the device has higher pixels
I also tried:
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
But it seemed to behave exactly the same way.
I am using c# asp.net and i can detect what my device is and change the viewports accordingly, so if I am using a desktop or laptop browser I will use a different viewport meta. I just can't figure out how to ge the result I want on mobile.
Any suggestions?
Css media querys to change the layout depending on width will help.
#media screen and (max-width: 900px){
#div_to_hide{display:none;}
}
Further reading:CSS media queries
Related
My question is basically all in the title. I am wondering if there is a way to adapt the display of ones app not only depending on the width of the device's screen but also depending on its height.
Let's take an iphone for example: The iPhone XR has a viewport of 414 x 896, while the iphone 8 plus or 7plus have viewports of 414 x 736.
So the width is the same but not the height. I am trying to display some content that fills the screen, but from what I know, I can only make that content responsive to the width of the device.
There are ways to go around like putting everything inside a container and set it's height to 100%, or something like that. But I was wondering if there was a similar approach to the viewport.
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS:
#media screen and (max-width: 720px) {
}
Thanks!
<div class="container">
I have simple container class.
I read the documents and understand.
It has both side spacing for PC screen, and it has full width for mobile screen.
However in my iphone simulator, it dosen't become full width, it remains spacing both side.
(I guess it is because of iPhone high resolution??)
If I use container-fluid, it becomes full-width on iPhone Sim.
I want to have with spacing on PC and full for mobile.
What is the best practice???
Try adding a meta tag with viewport inside your <head> tag.
This tells smaller device browsers how to scale the page.
It is more explained here.
https://webdesign.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972
<meta name="viewport" content="width=device-width, initial-scale=1">
I am testing a webpage on iPhone 5s (which has a resolution of 1136 x 640 pixels).
I have set meta as:
<meta name="viewport" content="user-scalable=yes, initial-scale=1, width=device-width, shrink-to-fit=no">
and css:
body {
min-width: 600px;
}
The remaining classes on the page do not have pixel based width. They are all using % based width, none of which is more than 100%.
The page however, does not appear in full on phone's screen. I have to scroll horizontally to see complete view.
Only when I set the body's min-width to 300px, the page appears full on phone's screen.
Now I am wondering why 600px cannot appear in full when phone support 640px horizontal resolution. I may be missing something very basic, please guide.
You're missing that you should count the point size of the iPhone screen, not the pixels.
This website which lists the viewport for most devices confirms that.
My site requires at least 720px width. Iphone 6 appears a resolution of 1334x750 but their browser reports 667px. Samsung S5 supposedly is 1080x1920 but the browser reports 640.
I know the screen can handle the details but I'm not sure how to get a larger resolution. I need 720px to be the minimum width so what do I do to have phones <720px to scale correctly? By scale I mean show all 720px without any scrolling
You need to start with this in the head code <meta name="viewport" content="width=device-width,initial-scale=1">
then add media queries to you css sheet that support all current devices
http://codepen.io/mlegg10/pen/JKdOaj
If I understand you correctly, you want your contents width to be scaled down to the width of the viewport. This is usually done automatically unless the code contains the following line in the head section of the page:
<meta name="viewport" content="width=device-width, initial-scale=1">
So if this is in your code, remove it. (But note that you make your page non-responsive that way, which is rather unusual nowadays!)
Concerning your observations in regard to device pixels: This has to do with "pixel density" which is important for the better display/sharpness of text (fonts) and vector graphics, as well as images if high-resolution images are supplied to the browser. For example the iPhone 6 actually has a height of 1334 physical pixels (ratio 1:2), which is however treated as 667px when it comes to CSS pixel units.
Input this in .css code before using the code design
#media only screen and (min-width:720px)
and (max-width:1336px) and (min-resolution
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">