I am really helpless with this problem, please advice.
I have web page that I want to optimize (with CSS media queries) for mobile devices. In <head>, I have this:
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
But some problems appear when testing media queries:
1) Testing on my Huawei Ideos X1, which has display width 240px. So, CSS should look like this:
#media (max-width: 240px) {
body: { background-color: red; }
}
but it do nothing.
2) "Where could be problem?" I said. So, I am giving javascript for displaying screen resolution to the <body>:
<div>
<script>
document.write(screen.width + 'x' + screen.height);
</script>
</div>
But it shows "320x425". This is weird, my mobile has screen width 240px, not 320.
3) Doesn't matter. I read about mobile browsers which auto-zoom thats content for displaying more content into one screen. Maybe my mobile browser zoomed out and now display area 320 px width. So, I am adding two lines to the <body>. One with width 240px, second with width 320px. Expect both to render in mobile browser without scrollbars, climbed to the screen:
<hr style="width: 240px;">
<hr style="width: 320px;">
To my surprise, screen was climbed with first line (240px), the second line (320px) went out of the screen (for 80px) and horizontal scroolbar appears.
So, to cut a long story short: Javascript thinks to have 320px wide screen available. CSS thinks to have 320px wide screen available. But only 240px can fit into the screen. Similar behavior shows on my friends iPhone.
Please advice me, where is my mystake? Thank you.
P.S. Test source code can be found there: http://pastebin.com/ULNm4RfW
I think one of your issues could be resolved if you designed with a mobile-first method. That means design for the smallest screen size (mobile) and then move your way up to larger.
Your css would turn from max-width to min-width values, like so...
#media screen and (min-width: 240px) {
CSS: here;
}
So all of your basic styles that you set in the beginning would be for the smaller screen sizes, and the rule above would set styles starting with any screen size 240px or above.
This also will remove the need to use any JavaScript, which you should try to avoid using when browser sniffing screen sizes.
Related
I want to know is there any way to have responsive web design except using this meta tag :
<meta name="viewport" content="width=device-width,initial-scale=1">
Below meta tag will just reset initial scale to 1 and width to device width
<meta name="viewport" content="width=device-width,initial-scale=1">
you can however use media query for responsive web design
like for ex
#media only screen and (min-width: 769px) and (max-width: 1281px) {
h1{
color: red;
}
}
Take a look at this, bootstrap has it's own media querys also responsive.
No. HTML needs this meta tag for creating the page a responsive page. There is no other method in css.
But, you can create the responsive page by JS. You have to write different css code for different resolution and on page load you can calculate the width of the page and load specific css file required for that particular resolution.
Although it is not a ideal way for responsive page.
Thanks!
The viewport meta is the element which turns a regular site to responsive web design. Without the viewport meta tag, the page is displayed as a typical desktop screen even in the mobile device. So using the tag is a must if you want the site to be responsive in all the devices.
<meta name="viewport" content="width=device-width"> tag (originally Apple-proprietary) actually makes the layout viewport fit the device exactly.
Now what is the layout viewport? It’s the area (in CSS pixels) that the browser uses to calculate the dimensions of elements with percentual width, such as div.sidebar {width: 20%}. It’s usually quite a bit larger than the device screen: 980px on the iPhone, 850px on Opera, 800 on Android, etc.
If you add <meta name="viewport" width="device-width">, the width of this layout viewport is constrained to the device width in device pixels; 320 of them in the iPhone’s case.
That matters if your pages are narrow enough to fit in the screen. Take this page without any CSS width statement and without the <meta> tag. It stretches over the full available width of the layout viewport.
This is probably not what you want. You want to fit the text nicely on the screen. That’s the task of <meta name="viewport" width="device-width">. When you add it, the layout viewport is contracted (to 320px in the case of the iPhone), and the text fits.
Source: A pixel is not a pixel is not a pixel
The following solution provides responsiveness without using the viewport meta tag, but is not recommended.
Use #media queries with min-device-width or max-device-width instead of min-width or max-width
Example using mobile-first approach:
//CSS Rules to apply when screen size < 960 px ( Your mobile rules go here )
#media screen and (min-device-width: 960px) {
//CSS Rules to apply when screen size > 960px
}
Unless you have a strong reasoning always use <meta name="viewport" content="width=device-width,initial-scale=1"> tag.
I make a portfolio page, but I just make for large device. Now I want responsive so can I use #media query?
Here is my page, it looks good in large device but medium device and mobile look bad:
http://khanh19934.github.io/demofullport/
example
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
Here are some ideas to get you started.
Begin by adding a viewport meta tag in the head of your page, this will instruct mobile devices not to scale the content to fit the viewport (window width)
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
<head/>
Then you need to examine all elements on the page and adjust them where necessary so they work for all screen widths.
One approach would be to start with a wide window, then decrease the width until something doesn't look good. At that point inspect and adjust the css for the element in question.
You'll probably create a media query which targets the element at that viewport.
For example, you might decide that when the viewport is 1000px wide, the title div in the centre of your page is too small, it's currently styled at 25%, so you create a media query like
#media screen and (max-width: 1000px){
#title{
width:50%;
}
}
If you are new to responsive design spend some time getting up to speed with Chrome Developer Tools and what you can do with it. It's indispensable for work like this.
Good luck!
I'm having an issue with how my site is being displayed on my ipad. I've tried to set the viewport to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Which can be seen at http://erichschubert.com/viewport.html.
But it always results in my site appearing zoomed in and even when zooming out, the whole site is not visible.
As of now I have it running with:
<meta name="viewport" content="width=1024">
Which can be seen at http://erichschubert.com.
It appears fine, however, when the ipad is turned to landscape it zooms in and leaves a huge black sidebar on the right side.
The header on the site has a fixed position and is also not displaying properly when zoomed in. Is the issue simply that it is fixed? I would love to able to display the whole site in both portrait and landscape and also be able to zoom in uniformly.
Thank you so much for any help in advance.
The initial-scale=1 is only practical if you use it alongside media queries, so it accurately scales the page to fit the custom styles for that media query.
Changing it to width=1024 only forces a fixed page width, which is no use in your case.
The smoothest way to have a page scale without zooming issues is to use media queries, to allow it to resize depending on the screen size.
Most devices will re-assess the screen width when they detect a change in orientation, while others will simply zoom in to fit the portrait layout to the landscape view.
If you want to be sure, you could use:
#media only screen and (orientation:portrait) {
/* portrait stuff here */
}
and for landscape:
#media only screen and (orientation:landscape) {
/* landscape stuff here */
}
I wouldn't recommend being so specific as to target individual devices, it's a never-ending workload. 'iPad' used to mean 768px x 1024px, but now covers 2048px x 1536px too. There will always be new devices, but they will all be targetable via simple media queries.
I created a website without using mobile theme.
If i open my website in my smart phone browser, it resizing my theme.
I mean, It automatically reduce the size to my mobile browser.
For example...I already mention my text box size in my CSS code. The mobile screen pixel size is differ from desktop machine screen pixel size.
My Question is, how it reduce the screen resolution to mobile view?
please clear my doubt.
Thanks in advance.
Do you mean to resize your sites content for the handheld device? If you have a fluid layout (with % instead of pixels for widths) use:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Further reading: http://developer.android.com/guide/webapps/targeting.html
Either there might be some media queries defined within your stylesheet like
#media handheld, only screen and (max-width: 1024px)
{
//Style goes here
}
Which is a style defined for screens having maximum width of 1024px.
Another possibility is, styles may be defined fully in percentage. So that the styles are changed according to the window size.
Again there might be some scripts used in your code to resize. All depends on the code that you are using. There are variety of methods which fits the view according to the screen size.
if you want scale it in browser tell it in css.And use all width in % values
eg:
#media handheld, only screen and (max-width: 767px) {
//mobile version css
}
I am creating a page # [link removed]
The header at the top is really large (1600px) to accomodate wide monitors. Setting the header to 100% width doesn't work, because the rotation produces some weird effects.
I set the body overflow-x to hidden, so that a horizontal scroll bar doesn't appear. The layout should accomodate normal computer resolutions.
The problem is when you visit from a device with very small resolution, e.g., a mobile phone, or if you resize your browser window. It would be very helpful to have horizontal scrolling in this case, but it should ONLY scroll enough to be able to see the picture, and no further.
Does this make sense? Let me know what I need to clarify...
I've tried doing combinations of min-width and overflow-x on the body and header, but can't seem to find a solution that works.
Thanks!
Jeff
Use <link rel="stylesheet" media="handheld" href="%%%.css" type="text/css" /> to target the handheld devices, and set the overflow-x to auto in the handheld stylesheet. Or use JavaScript to load a stylesheet based on scren res
<script type="text/javascript">
if (screen.width < 1024)
</script>
My answer is a complement to 0x60's answer.
I recommend using CSS Media Queries instead of JavaScript to detect screen widths.
For example:
#media only screen
and (min-device-width: 320px)
and (max-device-width: 480px){
/* Styles */
...
}
Check these articles out:
Media Queries for Standard Devices
How To Use CSS3 Media Queries To Create a Mobile Version of Your Website