Here are two images of the same android phone, once in Portrait mode, once in Landscape mode.
Shouldn't one resolution be the opposite of the other? I.e. if one is 800x1360, the other should be 1360x800? What's going on here? If I try the same thing on my ipod touch, it reports the same resolution regardless of orientation. Also, on the android phone, the resolution appears to change as you zoom in and out or scroll around the page.
I'm trying to figure out how to handle the "reported" resolution of an android phone in CSS, which I can't do until I know exactly which resolution it reports. :(
As far as I can determine, the browser assumes that you are going to let it rescale the page as necessary, so it just always reports the same width no matter the actual screen size and orientation. The height is presumably just chosen so that the aspect ratio matches the actual screen ratio.
If you are running FroYo, the width is pretty much always reported as 800. I believe that it was more like 640 for Eclair, and that earlier versions may have used a completely different scheme for reporting screen size. (Those earlier versions also, I believe, supported "#media handheld", unlike later versions which assume that your phone screen/browser is closer to a desktop than a traditional handheld device.)
I've noticed a weird thing where dimensions like this are stored from the previous window/session. When u go to landscape/portrait and get the rez, do a refresh, see if u get another different rez.
Same is true for scaling.
My advice is do a useragent lookup and make a page specifically for mobile devices.
rendering the normal 'desktop' site just wont work.
if you do make the mobile site look at the html meta tage "Viewport" and put something like this in your head
Related
I'm working on a web application that uses Bootstrap 5.0 for the styling and I have a strange anomaly going on.
I have a collection of buttons (<a>...</a>) that are lined up in a horizontal pattern as shown in the attached image. As you can see, the desktop view looks great, but for some reason, looking at this on my mobile phone, the buttons are all crunched together indicating that the gap part of the class="d-grid gap-2 d-sm-flex" is being ignored by my mobile phone.
In my dev environment, I use the browser's dev tools (F12) to view it using Galaxy S5 in landscape mode which is the closest thing to my Galaxy A51 5G phone. My immediate suspicion is that perhaps it has to do with the fact that the gap-# in bootstrap translates to rem rather than pixels. I'm looking into that now. Until then please let me know if you have a more concrete answer.
Thanks a bunch.
Okay, I found an acceptable workaround, but I'm still interested if you know what the deal is with the gap-# not working on the mobile device. Here's what I did for now...
I removed all of the class="gap-#" and placed the following in the class of each button inside the foreach loop that places the buttons:
<button class="mb-2 mb-sm-0 me-0 me-sm-2" type="button" ... </button>.
This allows me to set the bottom margin of each button to have some space with the right side having no space while in mobile (portrait mode), but then have the bottom margins set to 0 and the right (end) margins set to have some space while in landscape mode and every size larger than the smallest size.
It seems a bit "hacky", but it works.
Please answer if you know a better way to get the gap-# to work in landscape mode of a small mobile device.
Thanks.
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
So I first had created an app with HTML/CSS/JS self-typed and after that, I've created a new version with Adobe Muse. Both uploaded to Phonegap, turned into APK and uploaded->Installed on my phone (HTC One X, resolution: 1280x720)
The whole site (both versions) are based on a 1280x720 screen and all sizes are based on that. However, on both versions; if I load it on my phone, it results in a very much zoomed version, which makes you be able to 'scroll' on the app. Somehow.. I can't seem to fix that.
My question: How do I fix it, so my screen size is the same as the apps' (html files)? Resulting in no scrolling? (And for bigger/smaller screens automaticly up/downscaling?).
Sometimes I notice the Android emulator starts with a very small font size. This seems to happen randomly. Other times it has a normal font size.
I use ADT 10.0.1.
Do you know what is the problem?
This happens very often, and although I'm not sure about the exact reason behind this, it seems that somehow the wrong density was detected for this and resources for a lower dpi is loaded inside a higher dpi emulator. That's why everything is smaller, but the layout works properly and aligns things at their own places. And you're right: when this happens, network doesn't work in emulator! These two things seem unrelated, but my guess is that emulator fails at loading config for the current virtual machine successfully, and that includes density and network capabilities.
Anyways, there doesn't seem to be any official info on this, and similar reports in android-developers mailing list didn't get any response for developers of Android, although this is a very popular bug.
And the solution right now is only restarting the emulator. Sometimes you have to do this more than once, but finally it works.
Make sure your computer's display resolution can satisfy your emulator's exact resolution. If you are using Mac with Retina Display, this problem may occur. Try changing display resolution via Display settings.
reading about all these different resolutions and hardwares for Android I am a little unsure if the layout I created for an Samsung Galaxy will actually work the same way on all (most) Android devices.
I did not use anything fancy or complicated. However I had to use fixed width in several places to align text and buttons nicely. ALso there is some text with linebreaks that could look differntly if on narrower screens
How can I be sure that my layout will work on other devices? Or is this actually a no issue? Testing in the debugger is sooooo slow, that I actually never got it to work properly.
Thanks very much!
You can set up multiple emulators with different screen sizes, that simulate the possible targets.
In the emulator Ctrl-F11/12 (thanks #ccheneson) allows you to change the orientation, so that you can test that as well.
The emulator may be slow, but to see how the layouts look like it should be fast enough - you may still test the logic on a real device.
Also emulator speed seems to be highly dependent on the screen size.