I am creating a webpage that is size-specific rather than pixel-specific (i.e. width in centimetres or inches not pixels)
When testing on different mobile phones I've noticed that sometimes the resolution of the device can be extremely high making the objects on the screen very small compared at what I want the user to view them at.
I'm using queries such as this:
#media screen and (min-width: 0px) and (max-width: 400px){
/*2 rows*/
.a1x1, .a1x2{
width:50%;
}
.a3x3, .a3x2{
width:100%;
}
.a2x3, .a2x1, .a2x2{
width:100%
}
}
...etc
I know that a list of queries I can use are here at w3schools but I'm not sure what one I would use or how to implement it.
Any help is appreciated! (Please put examples if you can :D)
EDIT:
Sorry for not being completely specific with the question, let me provide a complete description of what I'm trying to achieve.
I have a page that will display media (mostly images) within a grid-based page. When the page is desktop size it will display 5 columns wide. When it is tablet size I would like to display 4 columns.
Depending on the size of the mobile device (small/phone) I would like the media to be displayed in 2 or 3 columns. The problem is: on devices such as the Samsung galaxy S IV that have very large resolutions/PPI: they display all 5 columns making the media seem small - removing the full screen effect I'm trying to achieve.
So question is this:
How would I detect small device screens and appropriate this into my
css coding?
So far this blog post has been the most helpful.
So I finally had time to look over the links posted as answers. (yay!) It seems that if the device has the resolution to display the entire website it will.
I fixed it by adding this little beauty:
<meta name="viewport" content="width=device-width, initial-scale=1">
This forces the device to display 1 for 1 without any zoom. Though I believe this may act differently or not be supported on other mobile devices.
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 have this simple HTML generated from React
<!doctype html>
<html><head><title data-react-helmet="true"></title><style type="text/css" data-styled-components="" data-styled-components-is-local="true"></style></head><body><div id="app"><div data-reactroot="">Hello</div></div></body></html>
When I open it in Chrome with mobile view, the page dimension is bigger than screen size. In this example, the iPhone 5 dimension is 320x568 but my page width is already 980px. There is no CSS used on the
This forces me to use bigger font size which looks normal on that page but becomes really big on desktop. How the page size can be bigger than screen size? How's that happen?
What you're looking for is the #media selector. You read more about it here.
At the bottom of your code (or anywhere you like, but it's bet to put it at the bottom), you'd add
#media only screen and (max-width: ##px) {
}
Where you see "##", you'd put the max-width of the phone screens you're trying to display code in.
On the inside of the brackets, you can rewrite your entire website to fit specifically to a phone (and it'd only show up on a phone with a max-width of ##px or less), or you can simply edit one thing, such as the font-size in this post.
Say for instance in your primary post you had
.desktop {
font-size: 30px;
}
For phone, you'd put
#media only screen and (max-width: 568px) {
.desktop {
font-size: 15px;
}
}
I hope this helps out! If so, don't forget to upvote and mark as acceptable.
Found the solution here, simply adding meta tag for viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
There are pages in the website that require reworking, such as converting everything to a single vertical column for mobile screens. In the React Native EditScreenInfo title_uri, I added a query string: mob=yes. The value isn't important, but the server code uses it to determine if it's called from a mobile device. So the server code determines which layout is to be used. I also used JavaScript to make the text as big as possible in the various tags for mobile.
I was searching about how to make your webpage fits any screen resolution and I found that most answers prefer using % over Pixels. I found that this is correct when I viewed the code of this website http://zcsfestival.com/
you can find objects overlap in mobile resolution or when you don't maximize the window of your browser. However, when I read the code of this site http://m3adikawmia.eb2a.com/?ckattempt=1
I found that it uses Pixels and it fits any screen resolution also when I restore the browser window down. It seems perfect. I became confused about that and I want any clarification about this point.
Thanks in advnace,
One way is to define elements with % . But some times the elements will be to small in mobile resolution that it is necessary to define different CSS codes for different resolutions. Like this:
normal situation:
.container {width: 1000px;}
responsive:
#media only screen and (max-width:800px) {
/* redefining some element sizes like the example: */
.container {width:100%;}
}
And this way will continue till mobile resolution.
I want to develop a responsive web page using media queries.
I have also wrote media queries for mobile, tables & desktops.
But i am not able to understand that if I am writing the set of css code for device max-width:320px , then same code i have to write again for another device i.e 640px with difference sizes.
I am confused whether this is the correct way of writing media queries as i am writing the same set of css code for each & every device size again & again.
Please help me to proceed furthur as i am new to media queries.
And also i am confused whether to go for adaptive layout or responsive layout?
That's great of you & I appreciate the helpful answers given by you all.
I have given a task by company where they told me that i cannot use any frameworks for designing responsive webpage, I only have to use media queries for this.
This might clear all your doubts.This framework makes your work a lot easier. http://getbootstrap.com/
Hope it helps.
With the media queries you're telling to your code -Bro if the width if bigger than this "size here" (320px, 240em whatever....) then use this piece of code.
else if "next bigger size here" then use this other piece of code, and the same with the next #media queries
There is two ways to use it.
Coding thinking in mobile first (ULTRA MEGA recommended) or not :)
This mean, you create code for the small browser and then start adding mediaqueries for phablet, tablet and then desktop and wide screen.
This is so useful because help you to add in the page only the really important content and avoid the useless ton of information. because you started designing the small size and have to compress all the usefull info and put inside :)
Learn more about mobile first technique
#media (min-width: 320px) {
nav li {
display: inline-block;
}
}
The idea of media queries and of cascading style sheets in general is to progressively enhance your as you go forth.
This means: start your design aiming at mobile. Once done with that add a media query for your next bigger targeted viewport size.
In this query overwrite all styling that needs to be different for this viewport.
And so on ...
Want you do not want to do is writing all styles again an again.
Check out some popular frameworks to get inspiration like twitter bootstrap, html boilerplate or foundation framework.
If the design is the same, lets say for desktop to large wide monitors, we can do something like
#media screen and (min-device-width: 800px) and (max-device-width: 2048px) {
/* STYLES HERE */
}
supposing you want the same design for every desktop screen. This will help you cutting the code down and not rewriting it.
the below example you can understand than it is essay to understand the media queries.
1) if you say - min-device-width:320PX; this is last breakpoint of your design, below your design doesn't work.
2) if you say - max-width:420px; - this pice of code work until the 420px only after that the code which you mentioned in the breakpoint that doesn't work in remain widths.
basic break point: 320px -mobile size
480px -mobile size, 640px -mobile size,
768px -heigh-end phones,
1024px - pad.
as remain widths may be seems to work in desktop width.
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
hope you get one idea if you read clearly.
I have this layout:
for a desktop/landscape site. And I want it to scale well on a mobile device BUT at the same time I don't want the site to look like crap so I want to change the content slightly so it more closely fits in with the size of a mobile device/smartphone sized screen.
So I came up with this:
In the landscape picture, the 5 boxes in the middle are divs, and each div contains a Picture and a Title (that links to another page). These 5 boxes are the main navigation.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
We can't use JavaScript for this site, so I am wondering how I would make such dramatic changes to this layout using media queries.
I know I can just include the massiv pic even on the landscape view but only choose to display it on the mobile version, but I don't want to download unnecessarily.
Is there a way to solve this?
Ok, this should give you the idea:
<div id="massive-pic"></div>
#media all and (min-width: 601px) {
#massive-pic {
display:none;
}
}
#media all and (max-width: 600px) {
#massive-pic {
background-image:url('images/massive-pic-mobile.png');
width:100%;
height:600px;
}
}
You can't insert the images in the HTML directly, otherwise the image will be downloaded allways! Even if you set it to display:none.
So you need to insert the images with css as a background image.
In the Portrait layout (for smartphone devices or just any screen that fits that size), there is only 1 pic, and it is not the pic that is displayed on landscape view or on desktop pc's.
That's not possible with server side scripting alone, because info like device width won't get send to the server.
However you can try to detect mobile and other devices accessing the user-agent and other header information.
If you use PHP, you could use something like that:
https://github.com/serbanghita/Mobile-Detect/