I'm putting together responsiveness for a client of mine (the site is using Bootstrap 2) but I'm having an issue. When I visit the site on my mobile device (HTC X8) I notice that it isn't really zoomed in to where it would look good.
Here is the link I'm using, and the result on my phone: http://www.gigee.me/draft/index.php?/account/login (if the site redirects you to just gigee.me, type in the rest of /draft/index.php?/account/login and it should work)
However, I want it to be more zoomed-in. Just like it looks when you are scaling down in a browser.
I think this might be a simple fix. I believe most of my HTML and CSS is correct.
I would really appreciate any and all help with this.
Most mobile devices utilize what is called a "virtual viewport". Essentially, what this means is that even though the device itself is relatively very small compared to a regular laptop / desktop monitor, it still displays at a high resolution. For example, newer versions of the iPhone and iPad both display at a virtual viewport of 980px. So even though you have a Bootstrap 2 responsive website with breakpoints at 768px and 980px, your phone is actually displaying the website at the desktop or tablet version since its virtual viewport is most likely higher than its actual viewport.
What you need is to detect phones (and tablets if you choose) and tell the document to render a viewport zoom if the user is using a mobile device.
In your HTML head tags, add the following
<meta name = "viewport" id = "viewport_device">
Then include the following JavaScript in your document after the jQuery library reference
if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/IEMobile/i)){
$("#viewport_device").attr("content", "initial-scale = 0.50");
}
else if(navigator.userAgent.match(/iPad/i)){
$("#viewport_device").attr("content", "initial-scale = 1.00");
}
The IF statement will detect all major mobile browsers. If a phone is detected, the initial-scale is set to 0.50. This is essentially telling the browser to zoom in 50%. If an iPad is detected, then the initial scale is set to 1. Depending on your page, you might want to play with these values to see what values look best for your site.
Related
So, I built my site in desktop form before doing mobile form. I saw that changing the initial-scale less than 1, for my case 0.6 (60%) works great! Is there any known side affects for people if I use this low scale? It seems fine with chrome inspect with different screens, and I just wanted to make sure this is good incase I post this to the internet.
60%:
60% (0.6) initial-scale
100%:
100% (1.0) initial-scale
I tried many scales, 60% worked best coming from desktop form. I'm currently concerned if using a lower than default initial-scale is good for everyone.
It's generally not recommended to use an initial-scale value of less than 1. This is because doing so can cause the content of your website to appear smaller than intended on mobile devices, making it difficult for users to read and interact with your site. It's generally better to use a scale of 1 or higher and responsive design techniques to ensure your site looks good on mobile devices. This will help ensure that your site is accessible and easy to use for all users, regardless of their device.
Screen Size unchanged on Mobile
Briefly explaining this, I have a Chat App that works well on a desktop view but when we go into mobile it seems that the device simply mimics the size of the desktop screen (ie: on my Oneplus 6 the <html> tag is around 4000x2000px). I'm quite new to HTML mobile scaling so forgive me if the wording for this isn't to par with what's expected.
Continuing, on my desktop if I manually change Chrome's window size my webpage scales perfectly while on my mobile device it's huge as said in the previous line. Would using the #media tag in css help specifically for this? If so, how?
One last thing, if I zoom in manually on my mobile it obviously looks perfect as it's meant to fit the new tall aspect ratios. Which is ultimately what I wish to do, just need to keep the website scaled perfectly like on the second picture (picture B).Image B
I'm trying to see how my web application (using Bootstrap 4) will look like on different devices. So, I use Firefox Responsive Design mode to check it out.
The problem I'm having is how to also account for Windows 10 Display Scaling (found under "Scale and layout" in Desktop settings)?
*On bigger monitors nowadays users mostly use at least 125% or 150%.
I've got a problem , that wordpress page
don't load correctly on mobile devices but on desktop with smaller width loads fine.
I've got meta tag with width=device-width and inicial-scale =1.
On my phone with 320px width site loads as about 800px but when I check it on desktop browser with 320px it looks how it should.
Where can be a problem ?
There might be many reasons..!
1) You might have used a many CSS (-webkit-,-moz-,-o-,-ms-) animations,whose properties are supported only by your browser.
2) Check latest android/mobile device, (which is designed to support all type of CSS behaviours).
3) Check your media queries, If you are using Chrome, you might have used only webkit.
You better use all the properties to support all kind of browsers,(-webkit-,-moz-,-ms-,-o-).
4) Use more JavaScripts than CSS.
5) Try this for debugging if you haven't tried.
Your page IS loading at the proper width. After it loads, some code executes and resizes the window. I noticed the following in your JS code:
if ( tribe_ev.data.v_width <= tribe_ev.data.mobile_break ) {
$body.addClass( 'tribe-mobile' );
}
else {
$body.removeClass( 'tribe-mobile' );
}
I set some breakpoints to test it, and this is where the resizing is done.
(I edited my answer and removed code that had nothing to do with it)
problem solved .
in Js file was line whenever device has Android iOS ect. make body width 1024px .
I'm building an iPad specific web app. Currently, I'm trying to set the page width & viewport settings to optimise the site.
What I'm trying to achieve is to have the web app take up the full screen in both landscape and portrait modes without user scaling and without blank areas to the left and right of the content.
I can achieve this with:
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
and
max-width:1024px;
min-width:768px;
The problem then, is coding all of my css for the variable widths. I'd really prefer to have a single css width so that I can properly code the widths of the page elements.
So if I set the css to have a single width, I can't seem to get the viewport settings right! When I open the page in portrait with these settings:
<meta name="viewport" content="width=device-width,user-scalable=no" />
everything works fine. When I rotate the device to landscape, again it's all good. Coming back to portrait then is where I have the problems. The page is then too big for the viewport! I want it to fit the device width still!
It's seems like it should be really easy! Am I missing something? I actually don't have an iPad (holding out for v2), so im testing on iOS simulator which comes with xcode – there shouldn't be any difference though!
I've been using this.
Not sure if this helps any, but there is a way you can detect the rotation and perform actions. Maybe forcing the page to render again or check the scaling. However I've not come across this problem on the iPad so far, do you have a page we can see to test on a device?
<body onorientationchange = "updateView();">
<script>
function updateView()
{
switch (window.orientation)
{
case 0: // Portrait
break;
case 90: ; // Landscape
break;
case -90: ; // Landscape counterclockwise
break;
}
}
</script>