I've decided to begin with websites for mobile devices. I'm using http://mobiletest.me to check how the website would look on mobile device, without actually using my mobile all the time to check. However, when I finally made 80% of work and wanted to check on my phone it displays the site on 100% width as a normal website not like an bigger one.
What is it I'm missing in my project to display it the right way? I have main container that holds all other divs inside. Maybe this might be the issue?
div#mobile-container {
position: relative;
width: 100%;
overflow: hidden;
}
Assuming by device size you mean setting the viewport:
<meta name="viewport" content="width=device-width">
Add this to your head tag and it will not give you a normal website size.
Also can't be harmful to add:
<meta name="HandheldFriendly" content="True" />
Related
Why is my website on mobile showing up like this rather than the content only? Am i missing some CSS? pls not I am using box-sizing:border-box in body. I used some media queries, but the website is so zoomed out and all of the content on the left on mobile view. You can check out the entire website at http://assistantmarcus.ml for the entire front-end.
PS: The page is perfectly zoomed in on mobile mode, its just that the user can easily zoom out making it look real bad. Is it because of the blob i put in?
Whenever you paint content outside the viewport, the browser will allow the user to scroll to it, on both directions.
By setting .blob's width to 150% on screens below 600px and to 290% on screens below 450px, you are rendering content outside the current viewport width, thus creating a horizontal scrollbar.
Since the content painted outside the viewport on the horizontal axis is irrelevant (you're only interested in the part of the enlarged element rendered inside the viewport), you probably want to disable horizontal scrolling on the body element:
body {
overflow-x: hidden;
}
See it here.
Side note: another way to enlarge .blob would have been to transform it, instead of setting its width and height:
#media (max-width: 600px) {
.blob {
transform: scale(1.5);
}
}
#media (max-width: 450px) {
.blob {
transform: scale(2.9);
}
}
I'm not just mentioning it, I'm recommending it. Using transform vs sizing or positioning has the big advantage of only happening in the compositor layer, without any effect on the layout and paint layers, which brings a big performance increase, especially when dealing with animations. This is well documented all over the web and I tried my best at explaining the mechanics here.
You are most likely missing the viewport tag inside your html head:
<head>
…
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
…
</head>
user-scalable=no in the meta tag helps to disable page zoom-in & zoom-out
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have a requirement from my client that I have to show desktop version on mobile. He told me that he wanted the website responsive so I used bootstrap and now he wants to show desktop view on mobile.
I went over many solutions on the internet, the only one that seems to be closely working for my case is setting the viewport tag.
Here's the code
<meta name="viewport" content="width=1024">
Now the thing is it worked for the most part but still there are some areas where it is still following the responsive view. I also tried with content="width=1200". It worked but there was a small horizontal scroll on the website or in some cases some part from the end is left blank!
Here's the live demo if anyone wants to see it:
http://nextcrawl.co/website/doubledouble/
You already seem to have the proper meta view settings, what's left is to give your .container class a set width:
.container {
width: 1024px;
}
And wrap your header nav and other elements into a .container div as well.
Try this
<meta name="viewport" content="width=device-width, initial-scale=1">
Consider the following viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />
The content on the page is non-scalable and mobile responsive. Sometimes, I need to overlay a large image on top of it, and allow the user to pinch-zoom that image.
#overlay_div {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #dddddd;
z-index: 550000;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
<div id="overlay_div">
<img src="largeimage.jpg" width="100%">
</div>
Currently, I am aware of two possible options:
Programmatically change the viewport meta to allow user scaling (possible cross-browser implications, also causes content underneath to scale which is not desirable)
Use hammer.js to manually handle the pinch event and scale the div/image accordingly (seems very complex possible compatibility implications).
Does anyone know the proper way to do this, especially for cross-browser compatibility? I am hoping there may be a simple CSS solution.
Thanks
I'm not sure it's your case but usually I prefer to make image a link (a) to original image. Mobile browsers can handle this situation opening image in full screen mode. Then user can do whatever he wants with the image or can go back to main page.
In general I would go with a zoomable version like #Paulie_D recommended; so use this on all of your pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here is Google´s recommendation.
If you really have no other choice, I would recommend to open the image in the same browser tab/window with the meta tag shown above and a back link for navigation. So the native pinch-zoom is available.
This is an example for such an implementation (you need a mobile user agent): https://m.notebooksbilliger.de/notebooks/hp+compaq+15+h024sg
I'm trying to make my site more "responsive" on mobile devices.
http://healthybodyguru.com
I've tried a lot of variations of the "viewport" meta tag, which is currently:
<meta name="viewport" content="width=device-width, initial-scale=1" />
But for some reason on my HTC Vivid, the page loads quite zoomed in:
Any ideas how I can adjust the viewport so the page is 100% visible on my Android?
Maybe try something like this:
<meta name="viewport" content="width=320px, initial-scale=1, maximum-scale=1"/>
I'm still trying to understand the viewport to be honest. But I think, I maybe got it now. The viewport width should be set to the default viewable width of the content. For example: If you just have an <img/> with width: 320px, than the image will be fullscreen if you use the code above.
initial-scale=1
Is causing it to load zoomed in. You can either remove it, or replace it with maximum-scale or minimum-scale (for whatever you're trying to achieve).
This code is working for me great ... I hope it will work for you too ...
// fit the width of screen
myWebView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
// remove a weird white line on the right size
myWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);
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.