Mobile with large dimensions showing desktop layouts

scrolling
iframe

(Shayan Sadrolashrafi) #1

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!! :pray:t2::grin:


I need a code that fixes Galaxy 8s layout
(Hans-Gerd Claßen) #2

¿?¿ read it twice, but still confused on it :eyes:

what exactly do you ask for, can you give any example of your setup so far, … ?

EDIT: if you are asking to show certain hype-layout devicerelated rather than breakpointrelated this should be helpful:


(Shayan Sadrolashrafi) #3

Thank you so much man! Would mind giving me a call 1+470.262.6854! I really be appreciate it, it’s a bit tricky to explain!


(Shayan Sadrolashrafi) #4

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?


(Shayan Sadrolashrafi) #5

How can I make the browser reads a different resolution for different devices? better saying I guess!


(Hans-Gerd Claßen) #6

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


(Shayan Sadrolashrafi) #7

Thank you so much again! :pray:t2:


(Shayan Sadrolashrafi) #8

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!


(Shayan Sadrolashrafi) #9

I need a code that fixes Galaxy 8s layout, that can read the iPhone layouts instead of desktop version?

Please help me I’m not good in Java…


(Jonathan Deutsch) #10

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.


(Shayan Sadrolashrafi) #11

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!!


(Freelancer) #12

How many layouts did you use? With which breakpoints?


(Shayan Sadrolashrafi) #13

this is the file the problem is MacBook 13" is same pixels as galaxy 8s and messes up the responsiveness! I don’t know what to do about it!!

https://drive.google.com/file/d/0B6CJuAn23v2cMXB2eDlJOU4wS0U/view?usp=sharing


(Freelancer) #14

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)


(Shayan Sadrolashrafi) #15

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?


#16

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.

The phone you’re using is quite large:


(Freelancer) #17

+1

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.

media query reference


(Hans-Gerd Claßen) #18

However … someone may help you with the scripted version i intendet … not me as on holiday​:innocent::wink::wink::slight_smile:


(Shayan Sadrolashrafi) #19

Thank you so much y’all let me know if you have any solution?


#20

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