I've been writing a HTML5/jQuery responsive template for a website based on viewport dimensions. I'm using an HTC 8X for some testing and while the screen resolution for the device is 1280x720 the width of the viewport in the browser is reported as 320px portrait and 480 in landscape (reversed for portrait orientation)?
While this isn't a problem as such, I wondered why this happens? And does this happen across all smartphones (iOS, 'Droid and Windows Phone).
Thanks in advance.
the browser in windows mobile and iOS support the meta MobileOptimized to tell the browser what res to report.
ie. you can tell the browser to report and react as if it was 320 wide by using
<meta name="MobileOptimized" content="320"/>
Related
I have a Codename One app which orientation is locked to portrait. That app is build to Android and iOS. It's a social and the portrait orientation is fine, except for video and images when they are landscape oriented.
To see a full screen image in a landscape orientation, I workarounded the problem rotating the image before showing it. However I suppose that the same workaround is not applicable to play a video.
How can I programmatically change the orientation of a Form to landscape when the app is locked to portrait? Otherwise, how can I satisfy the use case that I described? Thank you
This only works on Android and doesn't work for our iOS port. Notice that if you use the setNativePlayerMode it will work for iOS as well but you won't have any control as described here: https://stackoverflow.com/a/59495797/756809
You can set orientation to landscape explicitly using CN.lockOrientation(false). You can release the lock using CN.unlockOrientation().
But this will only work on Android and won't really impact iOS.
My site look good on desktop, when window is resized it is responsive, also when i open it on Android Tab, but when I open it with any Android mobile phone it look bad. I think it does not load my Jquery / JS file. Everything is good CSS wise.
The problem was in my main.js file, one of the jquery plugins is not loading on mobile phone so it caused whole program to crash.
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've been trying to tackle responsive design in emails and I am just having one problem. The email displays as it should in portrait and landscape view initially. However, when I go from landscape back to portrait, it does not display correctly. It squeezes the content from the landscape view into the portrait view. Any suggestions?
Here is the link: http://www3.universitybusiness.com/mailing/UBTech/2013/vendor1001.html
Info I forgot to add: I am trying to view it on the Android 2.3 native browser.
Setting your viewport metatag like this should make it work on the browser:
<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />
HOWEVER, you should definitely test this on email clients, not on the browser. Gmail mobile, like his desktop counterpart, is the hardest one to get right.