I'm busy developing a portfolio website. This website should behave responsively, ie: the website should be fully displayed when browsing on smaller screens.
I have added the meta viewport tag, but it does not seem to work. At the moment you need to scroll horizontally to view the full content. I want it to be initially scaled to the width of the viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
I guess I am missing something, but no clue what..
I was having all kinds of problems with viewport. Finally I just removed all traces of that stupid thing, and everything seems to scale correctly now. It might be that current mobile browsers are smart enough to scale without use of viewport. Of course I am using media queries too.
Related
I have a website, which has an on screen width of around 800 pixels. Now I don't want to change that as I am perfectly happy with it as it is, however, the problem I'm getting is that mobile users aren't able to scroll to the right, so they obviously can't see the rest of the content. As far as I was aware from previous sites that I've built, the scrolling is a default feature if the site is larger than the screen, so what's the problem here?
I have this code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
Which I suspect may be the problem? Any way to fix this?
i made a website responsive but when it loads into the phone it is zoomed automatically i applied view port as well but didn't find solution.
view port
j query
these doesn't solve my problem.
any one please help to fix this out
I understand your problem as I just solved a similar problem myself.
Method 1
You can specify the amount of zoom that is applied by targeting a specific device group. try adding this to your index.html
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=no">
This should keep your website from trying to scale with zoom.
If this does not work then try targeting specific devices with css
#viewport { width: 100vw ; min-zoom: 100% zoom: 100% ; }
Try playing around with the zoom and width values to find your device range.
Method 2
Open Firefox on your laptop or desktop and go to your site. and in the firefox options choose responsive view. Then press ctrl+shift+c and hover over your page to select the full page container. on the lower right hand side there will be a window with css. There you should find the element that is zooming in.
Also please update your question with your website
I'm working on a pre-existing Drupal (7.28) site.
Daiya Foods
When viewing the site on mobile, the page loads on the left side of the screen, taking up about 25% of the space. Then, it snaps up to full size landing the user about half way down the page. The client would like it to be resolved (or explained) and I'm coming up empty.
Screenshot of initial load
Thanks so much, and please feel free to contact me with any questions.
EDIT: This seems to happen on the homepage less often than interior pages.
The likely issue is your mobile meta tag in your html.tpl.php doesn't tell the browser what the initial zoom level should be. It's likely taking a few seconds for the browser to figure it out. Here's what you should have:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Another possible issue is your CSS is rendering your _desktop.scss styles in mobile viewports. They should be wrapped in min-width media-queries. You have a lot of fixed widths in there that are likely making the layout flicker until the mobile CSS is parsed. You should be writing CSS in a mobile first approach in which all your mobile styles are not in media queries while your desktop styles are in min-width media queries.
I'm making a small web project with Bootstrap 3.
At the top I've put this as it was suggested in most documents:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It works fine on desktop but layout seems to be small on my smartphone (Galaxy Note). Because this web app will mostly be used on a smartphone I wanted to force small screen by adding this to head section of html:
<meta name="viewport" content="width=320">
It didn't work, I've got same layout as of screen resolution greater than 768px.
What I want to achieve is Bootstrap to act in xs layout in small-factor screen size, independent of screen resolution.
Thanks
UPDATE:
Here is the fiddle: Fiddle Link
Display Metrics of my phone are: density=2.0 Dpi=320 heightPixels=800
scaledDensity=2.0 widthPixels=1280
EDIT:
Here are two screenshots. (I'll do a fiddle later) First is from phone, second from desktop. Desktop screenshot is what I want to get on a smartphone even if its resolution is on par with desktop.
Desktop:
UPDATE 2:
I've added this meta tag, but it didn't change anything on Android default browser or Chrome mobile:
<meta name="MobileOptimized" content="320">
What you are trying to achieve is overriding the basic premise of Bootstrap. Bootstrap uses the following scaling classes...
lg - For extra large displays
md - For standard sized displays such as desktops and laptops
sm - For tablet devices and devices with screens around the 7-11 inch range
xs - For mobile phones and devices with such small screens
The point of Bootstrap is to create a website style which will adjust itself based on the screen size automatically. You can use the md scaling class and if a smaller device is used then the elements will be collapsed and stacked on top of one another.
I am making a small SVG widget aimed at iphones with a fixed footer.
The problem is I want to use native pinch & zoom that only affects everything bar this fixed footer.
However I cant use native pinch & zoom if i use
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Which is needed I believe to standardize the 320px width across mobile devices?
My thought was then (dare i say it) an iframe for the pinch/zoom stuff above the fixed footer but you need 2 fingers to scroll an iframe and 99% of users wont know that (unless there is a simple js fix for that?)
Any help/guidance much appreciated.
Adi.