كود CSS وكود JS يعرضان "عرض" الصفحة Width بطريقة خاطئة

السلام عليكم

أمر بمشكلة هي الأولى من نوعها لدي عندما أحاول تحويل تصميم لموقع عادي إلى Responsive

في ملف CSS أستخدم media queries للهاتف كما يلي

@media  (max-width: 480px)

وأقوم بإضافة بعض العناصر وتغيير classes باستخدام JSاذا كان العرض أقل من 480 كما يلي

$(document).ready(function(){
document.body.style.overflow = "hidden";
var viewportWidth = $(window).innerWidth();
document.body.style.overflow = "";
alert(viewportWidth);
if(viewportWidth<480){
alert('welcome');
}
});

ولكن ما فاجأني هو أن بعض صفحات الموقع على الهاتف تعرض بشكل سليم سواء css أو js اما باقي الصفحات فلا يتم تطبيق الأوامر عليها وعندما قمت بتنفيذ alert للعرض وجدته 980 بكسل وبعض الصفحات 320 بكسل على نفس الهاتف

فهل من تفسير؟