The iPhone and other smartphone render a virtual window with of 320px. To work with this I used the meta-tag viewport:
<meta name="viewport" content="width=device-width">
The only problem is that my designer wants every smartphone to take 480px to render. Thus I tried width=480px, but I don't want tablets involved. Only smartphones should take this width of 480px. Is there a professional way to solve this problem (without PHP or JavaScript)?
Related
This website...
http://www.collegefundingremedies.com
is responsive on my computer, and displays correctly when I Inspect Elements through Google Chrome and click on the mobile the different mobile views, but when I open the website on an actual mobile phone, everything is unaligned and badly formatted. What am I missing here?
I have the...
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
in the index and media queries set up, so I'm not sure what's going on at all. Please help.
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'm having a bit of an issue. I have built a responsive site at http://www.nickpassaro.com/ClientSiteDev/New-NPD/ but for some reason, while it works perfectly on the desktop and rearranges its layout properly when you resize the browser window, it isn't working right on mobile devices. On the iPhone, its sending me to the tablet site, and on windows phone 8, it is showing me the mobile site but everything looks really zoomed out. My media queries are set to use under 640px for mobile, under 960 for tablet, and over 960 for desktop. Can someone hit view source on my site and see if they can see why it's using device pixels rather than CSS pixels?
thank you.
the reason its not working properly is that you have not assigned the Viewport.
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
a basic viewport for your case can be:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
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.
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.