Not a mobile design guy but have to work with some of my vendors who are making a mobile site for my company.
The visual design images they provided has 3 breakpoints. Basically lines which says how the site will look for 320px, 600px and 768px above.
Now when i asked my vendor which will show up for iphone 4 which has a resolution of 640 in portrait he says it will show 320 breakpoint. He showed me the following website which has a column called Device-W which he says should be used during development of the website.
http://screensiz.es/phone
Now the thing is before i go for the development vendor i wanted some one to help me understand what is that Device-W in laymans term so that am sure am not making any wrong decision.
This link should help you.
device-width refers to the width of the device itself, in other words,
the screen resolution of the device. Most mobile phones have a device-width of
480px or lower, including the popular iPhone 4 (with device-width:
320px), despite it technically having a 640 x 960 resolution. This is
due to iPhone 4's retina display, which crams two device pixels into
each CSS pixel on the screen. This is true for the Ipad 3 as well; its
reported device-width is 768px just like its predecessors, even though
its actual screen resolution is 1536px x 2048px. In general width is
more versatile when it comes to creating responsive webpages, though
device-width is useful when you wish to specifically target mobile
devices (and not desktops with a small browser window for example), as
rarely do desktops have screen resolutions below a certain number such
as 320px x 480px.
Related
Apparently when you set your device's display size to small react-native-device-info library thought that it's a tablet and according to that all the layouts and everything starting to act like tablets and my images aren't visible anymore. Does anyone having the same problem? Any suggestions?
Okay, I got it. With this new high density phones for example Google Pixel 2 XL or nexus or something like that some phone that you can change your display size to small. When you do that react native behave that your phone is a tablet and showing the tablet layout on that phone. So I actually checked some of the devices densities and there is not a single tablet over 2.0 density.
PixelRatio.get() < 2 ? DeviceInfo.isTablet : () => false
This is working for me if anyone is intrested.
I done website in bootstrap and still is not responsive in small devices and i seen many websites are responsive without using bootstrap or maybe media query.
Those responsive websites look like this :
code
But mine look like this
code
I dont know how to make my site to zoom and view like first one. Am struck please help..Any help appreciated. Thanks.
Have you used
Grid Classes
The Bootstrap grid system has four classes:
xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
The classes above can be combined to create more dynamic and flexible layouts.
Please check
Based on size of screen they have some attributes such as
col-xs-$ Extra Small Phones Less than 768px
col-sm-$ Small Devices Tablets 768px and Up
col-md-$ Medium Devices Desktops 992px and Up
col-lg-$ Large Devices Large Desktops 1200px and Up
There's a lot that has been written about media queries for to keep mobile first in mind, however, I have read very little about optimizing for larger screens (TV) and particularly, the new iMac. The dimensions here are much larger. What's the standard that people are using that work for small (mobile), medium (tablet), and desktop (from like a 13" inch MacBook pro to a large iMac)?
A couple of comments.
Mobile first doesn't exclude larger devices. Think of it as starting with a basic design for small screen mobile devices and then adding more features and building out the design as you move up through smartphones, laptops and desktop devices.
It doesn't have to be overly complicated for larger viewports. Think about increasing font and image sizes, and you'll have enough horizontal space that you could add an extra column or other elements if you need to.
With media queries and responsive design, you are typically looking at pixels, e.g. is the window or viewport of the user greater than 960 pixels wide. Don't confuse pixels with the physical size on a screen, pixel size can vary widely between different devices.
I have a mobile game developed by U3D and NGUI and targeted to platforms such as android and IOS, but there are so many mobile resolutions and aspect ratios change from 1.3 to event 2. My UI are designed under resolution 1136x640, and UIRoot Scaling style is FixedSize, Manual Height is 640.
I am not going to use anchors in NGUI widgets because distance is defined in pixels but not in percentages, when resolutions are changed, relative position of widgets are also changed, this is not what I want.
I refer this but still have no idea to handle this tricky problem perfectly, I need some suggestions on how to use NGUI in right way to handle different mobile resolutions.
The newest (3.x.x) NGUI allows you to use their new anchoring system. As you said, it is specified in pixels, however you can specify different targets and distances to different edges, and it will behave similarly to percentages.
Are you familiar with NGUI team videos explaining their new releases?
https://www.youtube.com/watch?v=6k5iIzKTEBQ
Some of the information there could be helpful, and playing with Custom settings of anchors either.
Another useful things is to create scaling script attached to root, which scales all elements down, basing on the detected dpi. If your UI is prepared for phones, you probably won't need all the buttons to take the same percent of the screen on tablets.
I am using a script from http://detectmobilebrowsers.com/ to detect whether a site is being viewed on a mobile browser.
If the site is on a mobile browser, I show a pared down, simple slideshow. If it is a regular browser, I show a whiz-bang super slideshow. I'd like to optimize my images, making them as small as possible on the mobile slideshow. My mobile slideshow is responsive, so it will shrink to fit in whatever window, but I don't want to make it any larger initially than it absolutely has to be.
Does anyone know what the maximum width is on the current array of mobile browsers? Or rather, the maximum width of mobile devices that are detected with the http://detectmobilebrowsers.com/ script?
BTW, I'm not asking how to detect the width once the page is loaded in a browser.
Thank you!!
Edit....
I think you guys misunderstood my question. I AM using max-width:100%. My images DO scale to fit any screen-size. And, I DO determine whether to show a simple slideshow or a complex one. Here's my logic:
If the user is using a mobile device (based on the device detector)
show a simple slideshow
Else the use is NOT using a mobile device (based on the device detector)
If this is a small screen (based on media queries)
show a simple slideshow
Else this is a large screen (based on media queries)
show a complex slideshow
End If (based on media queries)
End If (based on the device detector)
Why bother using mobile detection at all? Because even though for small screens I am only showing the simple, low-filesize slideshow on small screens, the images from the complex, image-heavy, high-filesize slideshow ARE STILL DOWNLOADED (http://cloudfour.com/examples/mediaqueries/image-test/). My media query determination of which slideshow to show doesn't save the user from having to download the images of the slideshow that's currently not shown. It's only used because the simple slideshow looks better on small screens than the complex one. Using the mobile detection screen makes sure that images that aren't shown, aren't downloaded.
Why do I care what the maximum width is on current mobile devices, when my images are set to 100% width and will scale down to fit any size? Because a 900px wide image has a larger filesize than a 600px wide image. If I know what the max width is that the image needs to be, I can save the slide down to that size initially, saving some additional bandwidth. Have you guys ever viewed a slideshow on a mobile device? Slow!
I would really appreciate if anyone can point me towards the proper stats. I googled, but couldn't find what I needed.
The answer is almost certain to change as soon as you deploy the software.
It also depends on whether you mean pixels or screen-resolution-pixels (the Retina displays define them differently).
Perhaps it's best to stick with detecting mobile browsers (if you don't like the scripts you're using, see , e.g.:
Detecting mobile browsers on the web?)
and then let users opt into higher-rez images.
Alternately, you could try to detect bandwidth, which is really what you're optimizing for; 'mobile' is just a proxy for this, and only moderately correlated with it.