Mobile with large dimensions showing desktop layouts

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

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

2 Likes

Thank you so much again! :pray:t2:

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

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.

1 Like

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

How many layouts did you use? With which breakpoints?

1 Like

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

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.

The phone you're using is quite large:

1 Like

+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

1 Like

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

1 Like

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

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

1 Like

+1

@shayan try this example

I think the suggestions~answers in this topic show just how weak the current state of affairs is.

As I’ve been following this thread it occurred to me the one thing that easily separates mobile from desktops is the “hover” feature; so I did a search and - yahoo! - found this.

The whole “Media Queries Level 4” is worth a read: https://drafts.csswg.org/mediaqueries-4

Yes, it’s all in a draft state (current: June 6 , 2017) but - when this drops - it will be a Beautiful thing.

1 Like

Agreed.
I have run in to this issue before and have never found a real reliable answer.
The none hover thing may work as a work around at some point

But it would be good if there was actually a device type/group register that was reliable and part of a standard.

2 Likes

do you know how can I say in that java

if(navigator.userAgent.match(/SAMSUNG|SGH-[I|N|T]|GT-[I|P|N]|SM-[N|P|T|Z|G]|SHV-E|SCH-[I|J|R|S]|SPH-L/i)) {
alert(“it’s Samsung default browser”);
// your code for Samsung goes here
}

that after detecting read the iPhone version 2x or 3x?