I'm trying to write application on the Samsung Bada platform. I'd like to make this application be available on different screen sizes and here are problems with this...
I have to make it work on mobile devices like: Wave 3 GT-8600 (480x800), Wave Y GT-S5380 (320x480) and Wave 578 GT-S5780 (240x400).
As i understood, we have to add device we need to "Device List" into our widget in bada IDE.
In that list we can see different phone models... I'm looking for Wave-model (in the bottom) so i will choose it, but i'm looking for different screen sizes... and i have no choice.
Maybe i loose something important in bada ide?
Than i visit bada developers website and saw there 3 type of files:
HVGA, WQVGA, WVGA - this files are for various screen sizes, right?
i put them to the "bada\2.0.5\Model" folder, but this didn't help me too.. in the device list still no more devices.
does someone know how to add more devices to device list, or how to make to be able to choose screen sizes in that list or.. maybe another way to create one widget for different screen sizes?
Aw, yeah.. my problem is: height and width of widget on different screen sizes.
This properties we can set in project.xml file in the root folder of widget. At this moment i have the same properties of widget for all screen sizes (from 240x400 to 480x800).
I set 220width x 130height for widget, and everything fine at small screen (240x400) and middle (320x480) screen, but in the large screen (480x800) widget can be get out off the screen if you move it at the right angle.
Also we can not set sizes of WIDGET larger than SCREEN size, because after installing widget will automatically became application (some bada magic), when i need only widget.
That's why i'm looking for possibility to set different "project.xml" files for different screen sizes.
If you're targeting bada 2.0, you can do a resolution independent app, where the right resource files are pickup up automatically by the system based on the current phone's specs. You'd get an abstracted display surface that's always 480 logical pixels wide, scaling to physical pixels is done internally.
And for development purposes, there are only three bada device types out there - WQVGA (240x320), HVGA (320x480), WVGA (480x800). Those are resolutions, not screen sizes. Screen size is roughly in the same ballpark, about 4".
Related
Problem
We use react-native-bootsplash to auto-generate our Splash Screens. The Problem is that even when using the --logo-width=288 option (which is the max size), the generated images are still too small.
Is there a way to adjust them afterwards? I tried using the Cordova resource generator to adjust the files in Android Studio, but the generated files just crashed the app.
The problem is mainly with Android, the tools in iOS seem to be better.
I have created my website with html, css and javascript and designed it for iPhone X to start off. My website is going to target on Instagram so my main targets are all types of mobile devices. I'm using media queries in css and I want to check for screen height. I'm not sure but it sounds like a good approach for me because for example iPhones don't differ that much in screen width as they do in screen height.
This is my way of approach in css:
#media only screen and (min-height: 481px) and (max-height:666px){*css*}
This should be a query for iPhone 5, but I got really confused by points vs pixels so I was hoping some of you can help me out.
Google chrome shows me the screen size of iPhone 5 as 320 x 568. I was guessing these are supposed to be points but it works just fine with my media query entered in pixels while screen size of iPhone 5 in pixels should be 640 x 1136 pixels.
My media query for iPhone 5 works just fine in Google Chrome iPhone 5 "setup" but I also have a test iPhone 5 at home where responsivity seems not working at all.
So before continuing my responsive design I wanted to have this clear.. Why is this? Is Google Chrome showing points or pixels? Should I use points or pixels in my media queries? Why does it work with pixels in css when they are completely different when I google screen sizes?
I would still consider myself as a beginner so I would really appreciate not too complicated answers.
Thank you!
I am new to html. I'm currently using django to create a website and wondering is there some way that I can preview my website at phone? For instance, if I set my width to be 1000px, how this will behave in a mobile device?
if you are using google chrome, you can inspect the page (CTRL + SHIFT + I ) and then select the device icon in the upper left corner. This option will show you how your website will respond on mobile.
You should build a responsive web application. Responsive Web design is the approach that suggests that design and development should respond to the user’s behaviour and environment based on screen size, platform and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities.
You can use the Google Chrome dev-tools, but I find them woefully inadequate and often inaccurate. They don't render the site I am currently working on very well.
I would recommend using a tool like Ngrok. It can be used to let you host the development environment on your local machine while easily viewing the site on your mobile device.
First of all, I reccomend using frameworks like Bootstrap which make all your components on your page 100% responsive (components adjust to the display size automatically) if you want them to be.
When your testing your website on your browser, right click anywhere and select "inspect". You will be promted a viewing window where you can select the mobile device of your choice to emulatee your website on it.
See image
Consider this scenario - I'm developing web applications for use on a tv, they will ALWAYS be in full screen. As you may or may not know, each TV has a different 'safe area', because most cut off a certain amount on one or both sides. I'd like to use a web page that displays some sort of visual ruler so that I could easily see a tv's 'visible' screen, to find this 'safe area'. Does a web page like this exist somewhere yet?
If not, what would be an easy way (I'm guessing javascript) to draw an on screen ruler that could be used to find the 'safe area'?
TV safe areas are approx 5% margin from the edge of the screen on new monitors.
When I do projects with this kind of resolution involved I simply add a generic 5% margin on the main container.
Not all monitors have the same safe area... but 5% is enough for all moderns one.
Edit:
Look at this as well: http://dev.opera.com/articles/view/creating-web-content-for-tv/#safe-areas
it say exactly what I wrote previously.
This sounds a bit too good to be true, so please tell me if it is.
If I have just one single version of a mobile website (no variations for
different devices, just one website for all mobiles), how reliable it is
to detect mobile devices by screen resolution?
And simply serve the mobile version if screen resolution is < than say 400px.
NOTE: My question assumes that javascript is enabled. Also,I'm aware there's
user agent detection, but I'd like to do without it.
Javascript mobile device screen detection for height is not reliable at all. The problem is that different browsers use different amounts of 'chrome' and different OS versions use different heights for the system bar. All the detection mechanism report unreliably for height (screen.height, window.outerHeight, window.innerHeight - etc,etc)
Width seems to be most reliable on window.outerWidth across all OS's.
Read a most excellent analytical report here:
http://www.tripleodeon.com/2011/12/first-understand-your-screen/
You will want to look into serving different stylesheets via media queries. You can use queries to identify screen widths and only serve certain css to certain devices. For example this query would serve a iphone.css only to devices identified as having the typical dimensions of an iphone:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
There's a detailed article on this subject over at alistapart
Bear in mind though that not all devices recognize media queries. If you need to support lots of older devices like blackberry's and flip phones you should take the advise above for using UA detection - I know it feels wrong if you're coming from the desktop development world but really we have to use the tools we have available to us and Mobile Web is a growing but in many ways still a new horizon.
I came here because I had the same idea and question, and similar situation - the website already requires JavaScript and I'm doing a one-size-fits-all mobile web app, at least for now. Our release cycle is really long - any UA detection I hard-code will be somewhat obsolete by the time the code is tested and released. Since the purpose of this alternate interface is to make it work on smaller screens, it would seem to make sense to use that test.
I don't know however, what size I would pick - I have a hunch mobile devices are not bound (even by convention) to particular screen dimensions. I guess we just have to decide at what point the main web page is no longer functional.
I can understand other people's hesitation to this approach because sometimes there are other issues with a standard site on a mobile device than just the screen size. However, I think there is an advantage to this kind of detection. If your only issue is the screen size, I think it is a good way to go.
Probably not going to hurt to add this functionality to your website for those who are indeed running JavaScript enabled web browsers on their mobile devices. As for those who are not, well there's little you can do about them, other than something simple like letting them select their screen size at first load? Maybe a simple drop down list with possible sizes?
It depends on what you want to achieve.
If you design for different screen resolutions regardless of device type then it is fine to use resolution ranges.
If you design for specific device types (phone, tablet, etc.) and assume a resolution range will always match a single device type, then it will eventually break.
You used a 400px threshold in your example, the Galaxy S8+ reports 412x846 with this code:
console.log("width: " + screen.width + ", height: " + screen.height);
Device resolutions change every year and they are starting to overlap with each other. Large phones have higher resolutions than small tablets and large tablets have higher resolution than some desktops.
You may get away with it if you just want it to mostly work or if you want to detect specific phones.
However it is not reliable to use screen resolution alone to detect the device type.