我有一个响应式网站,当网站处于“桌面”视图(屏幕可用宽度> 768)时,有一个 简单的下拉式登录菜单,位于其他导航链接旁边。当屏幕宽度低于768时,导航链接会出现在选择选项中。问题是,从选择选项中无法使用下拉式登录菜单。
在
在我的桌面上,我已经回显了$screenWidth,它显示为1920。因此,我期望“fancy”下拉式登录菜单被显示出来。(确实如此)。
在我的移动设备上,$screenWidth回显给出320。然后,我期望
奇怪的是,当变量在body中回显时会给出不同的数字,但在if语句中比较时却不会改变输出。
有没有更好的方法来改变输出?
编辑:jquery响应式菜单代码
我想使用PHP在屏幕宽度小于768时将下拉式登录菜单更改为简单的<a href>
链接。
现在我在我的页面 <head>
中有:
<?
$screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>';
?>
在
<body>
中:<?
if($screenWidth <= "768") {
echo '<li><a href="login.php">Log in</a></li>';
} else {
?>
<div id="fancy">
<li id="login">
<a id="login-trigger" href="#">Log in <span>▼</span></a>
<div id="login-content">
<form>
<fieldset id="inputs">
<input id="username" type="email" name="Email" placeholder="Your email address" required>
<input id="password" type="password" name="Password" placeholder="Password" required>
</fieldset>
<fieldset id="actions">
<input type="submit" id="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>
</li>
<? } ?>
在我的桌面上,我已经回显了$screenWidth,它显示为1920。因此,我期望“fancy”下拉式登录菜单被显示出来。(确实如此)。
在我的移动设备上,$screenWidth回显给出320。然后,我期望
<a href>
链接被显示出来。(但它没有-相反,它显示了“fancy”菜单)。奇怪的是,当变量在body中回显时会给出不同的数字,但在if语句中比较时却不会改变输出。
有没有更好的方法来改变输出?
编辑:jquery响应式菜单代码
jquery.responsivemenu.js:
(function($) {
$.fn.responsiveMenu = function(options) {
var defaults = {autoArrows: false}
var options = $.extend(defaults, options);
return this.each(function() {
var $this = $(this);
var $window = $(window);
var setClass = function() {
if ($window.width() > 768) {$this.addClass('dropdown').removeClass('accordion').find('li:has(ul)').removeClass('accorChild');}
else {$this.addClass('accordion').find('li:has(ul)').addClass('accorChild').parent().removeClass('dropdown');}
}
$window.resize(function() {
setClass();
$this.find('ul').css('display', 'none');
});
setClass();
$this
.addClass('responsive-menu')
.find('li.current a')
.live('click', function(e) {
var $a = $(this);
var container = $a.next('ul,div');
if ($this.hasClass('accordion') && container.length > 0) {
container.slideToggle();
return false;
}
})
.stop()
.siblings('ul').parent('li').addClass('hasChild');
if (options.autoArrows) {
$('.hasChild > a', $this)
.find('strong').append('<span class="arrow"> </span>');
}
});
}
})(jQuery);
$screenWidth = '<script type="text/javascript">document.write(screen.availWidth);</script>';
这段代码实际上可以通过为该变量分配一个数字值来工作吗? - Mark<? echo $screenWidth; ?>
并且毫无问题地得到结果,但是不能比较输出<? if ($screenWidth <= "768") { //something } else { //something else } ?>
。 - ScottD$screenWidth
是string(72)
类型。PHP从未看到整数值,因为当您的浏览器看到网页时,PHP已经完成了工作。 - Mark