screen width is always detected as a constant

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
danguss
New Member
New Member
Posts: 7
Joined: Wed Jul 11, 2018 6:24 pm

screen width is always detected as a constant

Post by danguss »

Hello,

I'm making webpage. It should be through all devices, problem is no matter what device the width of the "screen" is always 980px. What may be the problem? Is this common?
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1035
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: screen width is always detected as a constant

Post by DIGI3 »

How are you checking the width, with media queries or javascript? What do you have in your <meta name="viewport" ...> tag? Are you using a framework?

Might be a good idea to share your template and/or a link to the site.
Not getting the answer you need? CMSMS support options
danguss
New Member
New Member
Posts: 7
Joined: Wed Jul 11, 2018 6:24 pm

Re: screen width is always detected as a constant

Post by danguss »

Sorry,

heres the page i'm working on http://www.motiejusvaura.com.

I'm using quite standart version of cmsms 2.2.7 only modules that I installed and used are gallery and custom UTD script for detecting mobile devices

it only 980 pixels width on mobile devices.

"mobile_detect"

Code: Select all

$is_smartphone = FALSE;
// http://detectmobilebrowsers.com
$useragent=$_SERVER['HTTP_USER_AGENT'];
if(preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i',$useragent)||preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i',substr($useragent,0,4))) $is_smartphone = TRUE;

echo $is_smartphone;
User avatar
DIGI3
Dev Team Member
Dev Team Member
Posts: 1035
Joined: Wed Feb 25, 2009 4:25 am
Location: Victoria, BC

Re: screen width is always detected as a constant

Post by DIGI3 »

That looks like it's just a true or false to detect mobile based on the user agent string, nothing to do with the width.

You don't have a meta viewport tab, so mobile devices will just shrink the page. Your css is detecting the size properly, as your "screen and (min-width: 1px) and (max-width: 576px)" stylesheet kicks in when you resize the browser to < 577px.
Not getting the answer you need? CMSMS support options
Locked

Return to “Layout and Design (CSS & HTML)”