I need help, my layout for new Galaxy 8s is 1440 and the issue I have is that what I designed for that device is the same as the MacBook 13’’ inch and the browser reads the 1440 as well for both and messes the whole thing up regarding being responsive
My question is how I can make the browser read a deffrent size when it comes to MacBook 13 inch that what I designed for galaxy 8s stays the same or opposite?
How can I make the browser reads a different resolution or layout for different devices? better saying I guess!
How can I make for galaxy 8s “1440 x 2960” Make a MOBILE layout. instead of making a desktop, meaning that when someone opens the website up through Galaxy 8s see the iPhone layout?
or any other suggestions? After this I’m done with my client!!
How can I for galaxy 8s “1440 x 2960” Make a MOBILE layout. instead of making a desktop, meaning that when someone opens the website up through Galaxy 8s see the iPhone layout?
Did you have a look at my answer below?
it uses mobile-detect to distinguish between mobile and desktop.
-> if not mobile -> applies the largest layout <- default
you could edit it:
-> if mobile -> apply xxx-layout
mobile-detect also offers some more detailed methods/infos you may wanna use.
another way would be modernizer to detect features of a device and show the fitting layout
I still haven’t find the solution that all the mobile devices can read the mobiles layouts, I’m not good in java and don’t know how to use the solution!
I am a little unclear on what you are asking; specifically what problems are you having with the layout?
Hype Pro’s Responsive Layout system uses breakpoints to indicate at what pixel value the browser width is at to change between layouts. You can then use Flexible Layouts between those to move and resize elements to fit. Typically you only need a few Responsive Layouts for device classes, as these should be major changes in layout.
Also note that device pixels are often different than those reported to a browser. For example, while an iPhone 7 Plus may have a display that is 1334 pixels wide, the browser will see this as 667 pixels wide because it is a 2x retina scaling factor.
The issue that I have is that on Galaxy 8s reads the desktop version instead of mobile version it reads 1400*2900? Is the any code that can fix it that read iphone 7 plus for example? Or any solution! This is the last thing for my client!!
hey man. I never seen a project with so many layouts, maybe you can do the same with 4 or less. Is hard to find the right breakpoint ( maybe with a pixel density via media query) without risk to overlap another layout (13)
You are right because of being so precise dimensions i had to to do taht but my question is why a mobile device new galaxy 8 has to read a desktop version?
The name 'Desktop' or 'Mobile' isn't what Hype uses to display a layout: It uses the available width of whatever your device is reporting its 'width' as. So if your phone or phablet is as wide as some desktop browsers, a larger layout will appear.
moreover this phone is 570 ppi.
you can put both navigations in the desktop version and then add a mediaquery to hide/show the menu, based on pixel ratio + device orientation.
I'm not sure this fix the problem, but, with several layouts the result may be incorrect.
There are many ways forward, but no ‘single solution’ – I recommend reducing the number of layouts you have and combining Flexible Layout properties with Responsive Layouts. You could use JavaScript to detect a Samsung browser, but this is not really the right way to build in mobile support into your project.
Combining Flexible layout and Responsive layouts means you would need far fewer layouts, but a little more consideration over how your elements expand to fill the available space. This video shows how you can combine Flexible Layout and Responsive Layouts: https://youtu.be/CuwkJTtuGLc?t=1m53s
